Stretching increases for the content of a textarea

The web is an inexhaustible supply of mineral hints and ideas. The Internet is, by definition, an environment where every day contuna testing new ideas are born, some other genius, simply curious and interesting.

From the point of view of web design, one of the "special effects" that I prefer is the dynamic management of the size of a large text content changes entered by the user. In a nutshell: more content you write and the greater becomes the textarea. From a psychological point of view it is an invitation to continue to write the equivalent of saying "hey you want to write as well, there is no room."

In this article I propose a simple JavaScript function to handle this nice effect. The function in question does nothing but prolong the textarea when the contents exceed its natural capacity (avoiding, in fact, the appearance of dejection vertical bar). Here's the code:

 moreWords function (id, maxheight) {



  



 / / Create a variable to access the style properties of the textarea



  



 id: document.getElementById (id);



  

  



 / / If I can not go out without doing anything



  



 if (! txtarea) return;



  

  



 / / Create a variable that initially unless the current height of the textarea



  



 var = newHeight txtarea.clientHeight;



  

  



 / / If the height has not been set or this is bigger than the current ...



  



 if (! maxheight | | maxheight> newHeight) {



    

    



 / / Redefine the value of identifying newHeight the greater the height of the content (scrollHeight) and its current value



    



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



    

    



 / / If the height has been set ..



    



 if (maxheight)



      



 / / Redefine the value of newHeight identifying the smaller of the maximum height (maxheight) and its current value



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / If the calculated height (newHeight) is greater than the current textarea



    



 / / Make the change and lengthen the textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "hidden";



    



 }



  



 }



  



 / / If the maximum height is reached show the scroll bar



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

The function takes two parameters, a mandatory (the textarea's ID on which to apply the effect) and an optional (any height in pixels).

About the various steps used to create the function I believe there is little to add to comments already in the code.

The use of the function is very simple: our textarea onkeyup event launches the function that does nothing but re-calculate, for each key pressed, if the height is appropriate for the content posted on:

 



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

 

A working example of the proposed code can be viewed at this page .

The only limit of this function is the inability to contract if the user deletes the text ... in this case, the textarea is still the old size reduction, because our code is designed solely for the expansion of space and not for its contraction. However, if you wish, you can add this feature by adding a few lines of code.