Augmente Stretching pour le contenu d'un textarea

Le web est une source inépuisable de notes minérales et des idées. L'Internet est, par définition, un environnement où chaque jour contuna tester de nouvelles idées naissent, un génie d'autres, simplement curieux et intéressant.

Du point de vue de la conception Web, l'un des «effets spéciaux» que je préfère est la gestion dynamique de la taille d'un changement important le contenu du texte entré par l'utilisateur. En un mot: plus de contenu que vous écrivez et plus grande sera la zone de texte. D'un point de vue psychologique, il est une invitation à continuer à écrire l'équivalent de dire "hey, vous voulez écrire ainsi, il n'ya pas de chambre."

Dans cet article, je propose une fonction JavaScript simple à gérer ce bel effet. La fonction en question ne fait rien, mais de prolonger la zone de texte lorsque le contenu dépasse la capacité naturelle (en évitant, en fait, l'apparition de barres verticales abattement). Voici le code:

 moreWords fonction (id, maxheight) {



  



 / / Création d'une variable d'accéder aux propriétés de style de la textarea



  



 Identifiant: document.getElementById (id);



  

  



 / / Si je ne peux pas sortir sans rien faire



  



 si le retour (txtarea!);



  

  



 / / Création d'une variable qui initialement moins que la hauteur actuelle de la zone de texte



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Si la hauteur n'a pas été réglée ou si cela est plus grand que l'actuel ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Redéfinir la valeur de l'identifiant newHeight plus la hauteur du contenu (scrollHeight) et sa valeur actuelle



    



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



    

    



 / / Si la hauteur est définie ..



    



 if (maxheight)



      



 / / Redéfinir la valeur de newHeight identifier le plus petit de la hauteur maximale (maxheight) et sa valeur actuelle



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Si la hauteur calculée (newHeight) est supérieure à la zone de texte en cours



    



 / / Faire le changement et d'allonger la textarea



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "hidden";



    



 }



  



 }



  



 / / Si la hauteur maximum est atteint montrer la barre de défilement



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

La fonction prend deux paramètres, une obligatoire (ID du textarea sur laquelle appliquer l'effet) et une option (n'importe quelle hauteur en pixels).

A propos des différentes étapes utilisées pour créer la fonction, je crois qu'il ya peu à ajouter aux commentaires déjà dans le code.

L'utilisation de la fonction est très simple: notre événement onkeyup textarea lance la fonction qui ne fait rien mais re-calculer, pour chaque touche pressée, si la hauteur est approprié pour le contenu affiché sur:

 



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

 

Un exemple de travail du projet de code peut être consulté à cette page .

La seule limite de cette fonction est l'incapacité de contrat si l'utilisateur supprime le texte ... dans ce cas, le textarea est encore la réduction de la taille ancienne, parce que notre code est conçu uniquement pour l'expansion de l'espace et non pas pour sa contraction. Cependant, si vous le souhaitez, vous pouvez ajouter cette fonctionnalité en ajoutant quelques lignes de code.