Aumenta de alongamento para o conteúdo de um textarea

A web é uma fonte inesgotável de sugestões e idéias mineral. A Internet é, por definição, um ambiente onde todos os dias contuna ensaio de novas ideias nascem, algum gênio outro, simplesmente curioso e interessante.

Do ponto de vista de web design, um dos "efeitos especiais" que eu prefiro é a gestão dinâmica do tamanho de uma muda de texto grande conteúdo digitado pelo usuário. Em resumo: mais conteúdo que você escreve e maior se torna o textarea. Do ponto de vista psicológico, é um convite para continuar a escrever o equivalente a dizer "hey você quer escrever bem, não há espaço."

Neste artigo proponho uma função JavaScript simples para lidar com este belo efeito. A função em questão não faz nada mas prolongar a textarea quando o conteúdo ultrapassar sua capacidade natural (evitando-se, de fato, a aparência da barra de desânimo vertical). Aqui está o código:

 moreWords function (id, maxHeight) {



  



 / / Cria uma variável para acessar as propriedades de estilo do textarea



  



 id: document.getElementById (id);



  

  



 / / Se eu não posso sair sem fazer nada



  



 se o retorno (txtarea!);



  

  



 / / Cria uma variável que, inicialmente, a menos que a altura atual do textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Se a altura não foi definido ou este é maior que o atual ...



  



 if (maxHeight |! | maxHeight> newHeight) {



    

    



 / / Redefine o valor de identificação newHeight a maior altura do conteúdo (scrollHeight) e seu valor atual



    



 newHeight = Math.max (txtarea.scrollHeight, newHeight);



    

    



 / / Se a altura foi definido ..



    



 if (maxHeight)



      



 / / Redefine o valor de newHeight identificar o menor dos altura máxima (maxHeight) e seu valor atual



      



 newHeight = Math.min (maxHeight, newHeight);





    



 / / Se a altura calculada (newHeight) é maior que o atual textarea



    



 / / Faz a mudança e alongar o textarea



    



 if (newHeight> txtarea.clientHeight) {



      



 txtarea.style.height newHeight = + "px";



      



 txtarea.style.overflow = "hidden";



    



 }



  



 }



  



 / / Se a altura máxima é atingida mostrar a barra de rolagem



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

A função recebe dois parâmetros, uma obrigatória (ID do textarea sobre os quais deseja aplicar o efeito) e um opcional (qualquer altura em pixels).

Sobre os vários passos utilizados para criar a função que eu acredito que há pouco a acrescentar aos comentários já no código.

O uso da função é muito simples: o nosso evento onkeyup textarea lança a função que não faz nada, mas re-calcular, para cada tecla pressionada, se a altura é adequada para o conteúdo postado em:

 



 <textarea onkeyup="moreWords(this)"> </ textarea>

 

Um exemplo de trabalho do código proposto pode ser visto em desta página .

O único limite desta função é a incapacidade de contrato, se o usuário exclui o texto ... neste caso, o textarea é ainda a redução de tamanho de idade, porque o nosso código foi concebido exclusivamente para a expansão do espaço e não para a sua contração. No entanto, se desejar, você pode adicionar esse recurso, adicionando algumas linhas de código.