Este script de Javascript es bastante utilizado en muchos sitios web. Se trata de controlar el tamaño del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen de los permitidos. El control de los caracteres escritos se hace con Javascript, dinámicamente en el lado del cliente, de modo que cuando el usuario llega a la longitud permitida, no se permite escribir más contenido en el campo textarea.

Veamos el ejemplo en marcha para hacernos una idea exacta del objetivo de este artículo.

El ejemplo es sencillo. Simplemente vamos a definir un número de caracteres permitidos. Con cada letra que escriba el usuario vamos a comprobar si la cantidad de caracteres que hay en el textarea es permitida.

• Si es permitida, no hacemos nada.
• Si no es permitida, porque estemos sobrepasando el número de caracteres que puede contener el textarea, no se deja escribir más texto en el campo del formulario. Eso lo conseguiremos colocando el texto que había antes de que se escribiese ese carácter no permitido.

Adicionalmente, vamos a llevar la cuenta de los caracteres escritos en un campo de texto, para que el usuario pueda visualizar los caracteres que lleva escritos. Además, cuando se llegue al límite de caracteres permitidos se pondrá en rojo el campo de texto que cuenta los caracteres del textarea.

Este ejercicio está realizado a partir de otro ejercicio que hemos publicado anteriormente en DesarrolloWeb.com, que sería bueno leer: Contar caracteres escritos en un textarea

El ejercicio tiene dos partes, el script Javascript y el formulario HTML. Empecemos viendo el formulario:

<form action="#" method="post">
<table>
<tr>
   <td>Texto:</td>
   <td><textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea></td>
</tr>
<tr>
   <td>Caracteres:</td>
   <td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>

No tiene ninguna complicación. Pero hay que prestar atención a los eventos del textarea, que son onKeyDown y onKeyUp, que se desatan cuando el usuario aprieta o suelta teclas del teclado. En ambos eventos se llama a la función javascript valida_longitud(), que se encargará de hacer todo el trabajo.

Veamos ahora el Javascript:

<script>
contenido_textarea = ""
num_caracteres_permitidos = 10

function valida_longitud(){
   num_caracteres = document.forms[0].texto.value.length

   if (num_caracteres > num_caracteres_permitidos){
      document.forms[0].texto.value = contenido_textarea
   }else{
      contenido_textarea = document.forms[0].texto.value
   }

   if (num_caracteres >= num_caracteres_permitidos){
      document.forms[0].caracteres.style.color="#ff0000";
   }else{
      document.forms[0].caracteres.style.color="#000000";
   }

   cuenta()
}
function cuenta(){
   document.forms[0].caracteres.value=document.forms[0].texto.value.length
}
</script>

Primero se definen dos variables:

contenido_textarea = ""
num_caracteres_permitidos = 10

La variable contenido_textarea almacena el contenido del campo textarea. Al principio está inicializada a la cadena vacía, porque el textarea suponemos que está vacío.

Tenemos también una variable num_caracteres_permitidos, que almacena el número de caracteres que se permite escribir en el textarea. En este caso lo hemos definido como 10.

Ahora nos metemos con la función valida_longitud(). Lo primero que hacemos es averiguar la cantidad de caracteres escritos, y lo almacenamos en la variable num_caracteres.

num_caracteres = document.forms[0].texto.value.length

Luego hacemos la parte más importante de este script: Vemos si los caracteres escritos son menores o iguales que los permitidos, para actuar en consecuencia.

if (num_caracteres <= num_caracteres_permitidos){
   contenido_textarea = document.forms[0].texto.value
}else{
   document.forms[0].texto.value = contenido_textarea
}

Si los caracteres escritos son menores o iguales que los caracteres permitidos, entonces todo va bien. Lo que hacemos es actualizar la variable que mantiene el contenido del textarea, contenido_textarea, introduciendo lo que hay en el textarea actualmente, que es de un tamaño permitido.

Si lo escrito en el textarea es mayor que lo permitido, se trata de una situación que no se puede aprobar. Entonces simplemente escribimos en el textarea lo que hay en la variable contenido_textarea, que era lo que había antes y que estaba validado en longitud correctamente.

Eso es todo, es sencillo! Pero ahora vamos a hacer una pequeña mejora para que cuando el textarea llegue a la longitud máxima permitida el campo de texto que lleva la cuenta de los caracteres se ponga de color rojo.

if (num_caracteres >= num_caracteres_permitidos){
   document.forms[0].caracteres.style.color="#ff0000";
}else{
   document.forms[0].caracteres.style.color="#000000";
}

Como se puede ver, simplemente se comprueba de nuevo si el número de caracteres es mayor o igual que los permitidos. Entonces, si es así, se actualiza la propiedad style.color del campo de texto "caracteres", que muestra el número de caracteres escritos. Con style.color se puede modificar la propiedad de estilo CSS que define el color del texto del campo. Si se había llegado a los caracteres permitidos, se pone color rojo, en caso contrario, se pone color negro.

Por último hacemos una llamada a la función cuenta(), que ya habíamos creado en el artículo anterior:

function cuenta(){
   document.forms[0].caracteres.value=document.forms[0].texto.value.length
}

Esta función simplemente actualiza el campo de texto, colocando el número de caracteres escritos en el textarea.

Podemos ver de nuevo el ejemplo en marcha.