El estiramiento incrementa por el contenido de un área de texto

La web es una fuente inagotable de notas minerales y de ideas. El Internet es, por definición, un entorno donde nacen todos los días contuna probar nuevas ideas, algún genio otros, simplemente curiosos e interesantes.

Desde el punto de vista del diseño web, uno de los "efectos especiales" que prefiero es la gestión dinámica de los cambios de tamaño de un gran contenido de texto introducido por el usuario. En pocas palabras: más contenido que usted escribe y mayor es el área de texto. Desde el punto de vista psicológico, es una invitación a seguir para escribir el equivalente a decir "hey quieres escribir así, no hay lugar."

En este artículo se propone una función de JavaScript sencillo de manejar este efecto agradable. La función en cuestión no hace más que prolongar el área de texto cuando el contenido exceda su capacidad natural (evitando, de hecho, la aparición de la barra de abatimiento vertical). Aquí está el código:

 moreWords función (id, maxheight) {



  



 / / Se crea una variable para acceder a las propiedades de estilo de la caja de texto



  



 Identificación: document.getElementById (id);



  

  



 / / Si no puedo salir sin hacer nada



  



 si el retorno (txtarea!);



  

  



 / / Se crea una variable que, inicialmente, a menos que la altura actual del área de texto



  



 var = newHeight txtarea.clientHeight;



  

  



 / / Si la altura no se ha establecido o esto es más grande que el actual ...



  



 if (maxheight |! | maxheight> newHeight) {



    

    



 / / Redefinir el valor de identificar newHeight cuanto mayor sea la altura del contenido (scrollHeight) y su valor actual



    



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



    

    



 / / Si la altura se ha establecido ..



    



 if (maxheight)



      



 / / Definir el valor de newHeight identificar el más pequeño de la altura máxima (maxheight) y su valor actual



      



 newHeight = Math.min (maxheight, newHeight);





    



 / / Si la altura calculada (newHeight) es mayor que el área de texto actual



    



 / / Hacer el cambio y alargar el área de texto



    



 if (newHeight> txtarea.clientHeight) {



      



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



      



 txtarea.style.overflow = "hidden";



    



 }



  



 }



  



 / / Si la altura máxima se alcanza mostrar la barra de desplazamiento



  



 txtarea.style.overflow = "auto";

  

  



 }

   





 }

La función tiene dos parámetros, uno obligatorio (el área de texto del ID en el que se aplica el efecto) y un accesorio opcional (cualquier altura en píxeles).

Acerca de los distintos pasos para crear la función que yo creo que hay poco que añadir a los comentarios que ya están en el código.

El uso de la función es muy simple: nuestro evento onkeyup textarea lanza la función que no hace más que volver a calcular, para cada tecla pulsada, si la altura es apropiado para el contenido publicado en:

 



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

 

Un ejemplo de trabajo del proyecto de código se puede ver en esta página .

El único límite de esta función es la incapacidad de contrato si el usuario borra el texto ... en este caso, el área de texto sigue siendo la reducción del tamaño de edad, ya que nuestro código ha sido diseñado exclusivamente para la expansión del espacio y no por su contracción. Sin embargo, si lo desea, puede agregar esta funcionalidad mediante la adición de unas pocas líneas de código.