javascript - value - textarea wrap css




Como autosize uma textarea usando Prototype? (12)

Apenas revisitando isso, tornei isso um pouco mais ordenado (embora alguém que tenha uma garrafa cheia em Prototype / JavaScript possa sugerir melhorias?).

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

Apenas chame com:

new TextAreaResize('textarea_id_name_here');

Atualmente estou trabalhando em um aplicativo interno de vendas para a empresa em que trabalho e tenho um formulário que permite ao usuário alterar o endereço de entrega.

Agora eu acho que seria muito mais bonito, se a área de texto que estou usando para os detalhes do endereço principal apenas ocupasse a área do texto, e redimensionasse automaticamente se o texto fosse alterado.

Aqui está uma captura de tela dele atualmente.

Alguma ideia?

@ Chris

Um bom ponto, mas há razões que eu quero redimensionar. Eu quero que a área ocupada seja a área da informação contida nela. Como você pode ver na captura de tela, se eu tiver uma área de texto fixa, ela ocupará um bom espaço vertical.

Eu posso reduzir a fonte, mas preciso que o endereço seja grande e legível. Agora eu posso reduzir o tamanho da área de texto, mas tenho problemas com pessoas que têm uma linha de endereço que leva 3 ou 4 linhas (uma leva 5). Precisar que o usuário use uma barra de rolagem é um grande não-não.

Eu acho que deveria ser um pouco mais específico. Eu sou após o redimensionamento vertical, e a largura não importa tanto. O único problema que acontece com isso, é o número ISO (o grande "1") é empurrado sob o endereço quando a largura da janela é muito pequena (como você pode ver na imagem).

Não é sobre ter um gimick; trata-se de ter um campo de texto que o usuário pode editar que não ocupará espaço desnecessário, mas mostrará todo o texto nele.

Embora, se alguém apresentar outra maneira de abordar o problema, também estou aberto a isso.

Eu modifiquei o código um pouco porque ele estava agindo um pouco estranho. Eu mudei para ativar na keyup, porque não levaria em consideração o personagem que acabou de ser digitado.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

Aqui está outra técnica para autosizing uma área de texto.

  • Usa altura de pixel em vez de altura de linha: manipulação mais precisa de quebra de linha se uma fonte proporcional for usada.
  • Aceita ID ou elemento como entrada
  • Aceita um parâmetro de altura máxima opcional - útil se você preferir não deixar a área de texto crescer além de um determinado tamanho (mantenha tudo na tela, evite quebrar o layout etc.)
  • Testado no Firefox 3 e no Internet Explorer 6

Código: (plain vanilla JavaScript)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if (!text)
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

   var adjustedHeight = text.clientHeight;
   if (!maxHeight || maxHeight > adjustedHeight)
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if (maxHeight)
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if (adjustedHeight > text.clientHeight)
         text.style.height = adjustedHeight + "px";
   }
}

Demonstração: (usa jQuery, alvos na área de texto em que estou digitando agora - se você tiver o Firebug instalado, cole as duas amostras no console e teste nesta página)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

Aqui está uma função que acabei de escrever no jQuery para fazer isso - você pode portá-lo para o Prototype , mas eles não suportam a "vivacidade" do jQuery, então os elementos adicionados pelos pedidos do Ajax não responderão.

Esta versão não apenas se expande, mas também se contrai quando delete ou backspace é pressionado.

Esta versão depende do jQuery 1.4.2.

Apreciar ;)

http://pastebin.com/SUKeBtnx

Uso:

$("#sometextarea").textareacontrol();

ou (qualquer seletor de jQuery por exemplo)

$("textarea").textareacontrol();

Foi testado no Internet Explorer 7 / Internet Explorer 8 , no Firefox 3.5 e no Chrome. Tudo funciona bem.


Aqui está uma solução com o JQuery :

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abc é uma teaxtarea .


Como a resposta do @memical.

No entanto, encontrei algumas melhorias. Você pode usar a função jQuery height() . Mas esteja ciente dos pixels de preenchimento e de fundo de preenchimento. Caso contrário, sua área de texto crescerá muito rápido.

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});

Confira o link abaixo: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});

Eu precisava dessa função para mim, mas nenhum dos daqui funcionou como eu precisava deles.

Então eu usei o código do Orion e mudei.

Eu adicionei em uma altura mínima, de modo que na destruição não fique muito pequena.

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};

Facebook faz isso, quando você escreve nas paredes das pessoas, mas apenas redimensiona verticalmente.

O redimensionamento horizontal me parece uma bagunça, devido a quebra automática de linhas, linhas longas e assim por diante, mas o redimensionamento vertical parece ser bastante seguro e agradável.

Nenhum dos iniciantes no Facebook que eu conheço já mencionou algo sobre isso ou ficou confuso. Eu usaria isso como evidência para dizer "vá em frente, implemente-o".

Algum código JavaScript para fazer isso, usando Prototype (porque é com isso que eu estou familiarizado):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

PS: Obviamente, este código JavaScript é muito ingênuo e não é bem testado, e você provavelmente não quer usá-lo em caixas de texto com romances, mas você tem uma idéia geral.


Para aqueles que estão codificando para o IE e encontram esse problema. IE tem um pequeno truque que faz com que seja 100% CSS.

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

Você pode até mesmo fornecer um valor para rows = "n" que o IE irá ignorar, mas outros navegadores usarão. Eu realmente odeio codificação que implementa hacks do IE, mas este é muito útil. É possível que funcione apenas no modo Quirks.


Provavelmente a solução mais curta:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

Desta forma, você não precisa de nenhum divs escondido ou algo assim.

Nota: você pode ter que jogar com this.style.height = (this.scrollHeight) + "px"; dependendo de como você estiliza a textarea (line-height, padding e esse tipo de coisa).


Usando o ASP.NET, basta fazer isso:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>

Usuários do Internet Explorer, Safari, Chrome e Opera precisam lembrar-se de definir explicitamente o valor da altura da linha no CSS. Eu faço uma folha de estilo que define os properites iniciais para todas as caixas de texto da seguinte maneira.

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>




prototypejs