Un TEXTAREA en HTML por defecto tiene una altura fija, es decir si el usuario introduce mas texto que quepa en el TEXTAREA va a ver las barras de desplazamiento. Para permitir que el TEXTAREA crezca y el usuario pueda ver todo el contenido que está escribiendo existen dos soluciones:
- Los navegadores basados en Webkit como Chrome y Safari permiten que el usuario redimensione el TEXTAREA manualmente.
- Usar un Javascript que redimensiona automáticamente el TEXTAREA para adaptarlo a la altura del contenido escrito por el usuario.
La segunda solución (usar un Javascript) se puede ver por ejemplo en los TEXTAREAS de los comentarios en Facebook. Es una solución elegante, ya que permite crear un formulario pequeño que se adapta bien a posibles comentarios mas largos.
Hay varias técnicas para conseguirlo en Javascript. La mas básica simplemente cuenta los retornos de lineas y aumenta o baja el número de filas del TEXTAREA. Las desventajas son que contar el número de retornos en un texto largo puede tardar mucho y hay casos en que simplemente devuelve valores falsos. Uno de estos casos por ejemplo son palabras mas largas que una linea en el TEXTAREA. Estas palabras gastarán una linea mas en el contenido pero no nos enteraríamos ya que no existe un retorno de linea.
Otra técnica crea un DIV escondido, usando las mismas características de texto como el TEXTAREA. Cada vez que el usuario teclee algo, se copia el nuevo contenido del TEXTAREA al DIV. Como un DIV se adapta a la altura de su contenido, obtenemos la nueva altura del DIV y la aplicamos al TEXTAREA.
Una variación de esta técnica usa un segundo TEXTAREA escondido en vez de un DIV. Aplicando todos los estilos que influyan la apariencia del texto al segundo TEXTAREA se asegura que el contenido copiado tenga las mismas dimensiones. Para averiguar el tamaño real del contenido se usa la propiedad 'scrollTop' del TEXTAREA. Esta propiedad devuelve el número de píxeles que el contenido está displazado hacía arriba.
En la imagen de arriba se puede ver un ejemplo del scrollTop. El marco negro representa un TEXTAREA. El área verde es el contenido. Como no cabe en el TEXTAREA se puede desplazar hacía arriba o abajo. La propiedad scrollTop representa la distancia entre el principio del contenido y el principio del TEXTAREA.
El scrollTop también se puede cambiar. Aplicando 0 al scrollTop se mueve todo el contenido hacía abajo y se puede ver el principio del contenido en el TEXTAREA. Si aplicamos un valor mayor que la altura del contenido al scrollTop, el scrollTop no lo aceptará y se cambiará a su valor máximo permitido, que es la altura del contenido menos la altura del TEXTAREA. La altura del TEXTAREA si que conocemos, así que podemos obtener la altura real del contenido añadiendo la altura del TEXTAREA al scrollTop.
Para jQuery existe el plugin autoresize de James Padolsey que realiza la técnica de arriba. Lo he adaptado para poder usarlo con la librería Prototype y he arreglado algunos fallos que han surgido en mis pruebas. En la página de demo se puede ver como funciona. El código Javascript se encuentra dentro del HTML. Es una simple función 'autodimensionaTextarea'. A esta función le podemos pasar 3 parámetros:
- El ID del TEXTAREA (obligatorio)
- Los píxeles máximos de altura para el TEXTAREA (opcional). Si el TEXTAREA alcanza está altura, no crecerá mas y mostrará las barras de desplazamiento.
- Los píxeles de espacio adicional que queremos añadir automáticamente abajo de la última linea del contenido (opcional).
He añadido muchos comentarios al código Javascript para dejarlo lo mas claro posible. Sin embargo con cualquier duda podéis preguntar en los comentarios.
