Evitar que un textarea sobrepase un número de caracteres permitidos

  • Por
Hacemos un script Javascript para controlar que un textarea de un formulario tenga más caracteres de los permitidos. Es decir, que se permita escribir en un textarea hasta que se alcance una longitud del texto dada.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

FP

05/4/2007
Este script esta bueno aunque seria mejor que devuelva false al escribir el caracter 11 (lo que hace que ni siquiera aparezca), ya que con esto se nota que se esta eliminando un caracter

HSimpson

06/2/2008
El código funciona perfecto, excepto cuando se pega un texto superior a 10 caracteres desde el menú contextual (con el mouse), por lo menos en Firefox 2.0.0.11.

Borisigna

16/10/2010
Copy/Paste
¿Qué pasa si un usuario copia y pega texto de mayor longitud? He visto que no impide eso.

Gilberto

12/2/2011
Gracias
Excelente ejemplo y rápida implementación! muchas gracias! me resultó bastante útil. Saludos!

z666zz666z

15/11/2011
Con eso sólo no basta, además adolece de otros problemas que explico
Haz lo siguiente para ver porqué no vale sólo con eso:
-Escribe algo de texto
-Luego en cualquier parte haz Ctrl+V para pegar un texto largo, lo coge y la longitud total queda mayor que la permitida

Además adolece del problema de que si escribes en medio, lo que se pierde es lo del final y en algunos casos puede que ese final no lo tenga a la vista el usuario, por tanto sería un lío par el usuario, no se daría cuenta de que lo que está al final se está perdiendo.

Otro problema es al usar el ratón para pegar texto mediante el menú contextual, idem a Ctrl+V... y así mismo algunos navegadores web poseen un menú del tipo Edición -> Pegar, idem a Ctrl+V

La solución no es nada sencilla, yo de momento no la he encontrado, sigo buscando.

Carlos

25/11/2012
Solucion Sencilla
Simplemente usa la propiedad maxlength en el textarea sin necesidad de Java Script.

Saludos!

Kike

16/1/2013
Evitar que un textarea sobrepase un número de caracteres permitidos
Es mas simple con javascript dentro del atributo onkeypress, meter esta simpre funcion, la cual valida si el tamaño es igual al que queremos y regresa un false de lo contrario regresa lo que estas escribiendo.

saludos

onkeypress="if(this.value.length == 199){return false;}else{return toUpper(event,this);}"

Peter

12/6/2013
textarea
Gracias! lo he probado y funciona, ahora lo único que me queda es que el tamaño del textarea sea fijo, pero eso lo solucionare con el css ;)

Un saludo.

Mauricio Moreno

10/12/2014
Perfecto
Gracias, lo que necesitaba simple y funcional.

Gerx

18/3/2015
Otra solución sencilla
<script>
var maxLength = 500;
function testLength(campo) {
if(campo.value.length > maxLength) {
campo.value = campo.value.substring(0, maxLength);
}
}
</script>

<textarea class="a" type="text" name="texto" id="b" cols="80" rows="5"onchange="testLength(this)" onkeyup="testLength(this)" onpaste="testLength(this)"/>