Controlar el número de carácteres permitidos en un textarea

Name: Controlar el número de carácteres permitidos en un textarea
Brand: Jose Aguilar
SKU: joseaguilarblog-292
Availability: InStock
Rating: 5 (2 reviews)

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.

Lo primero que debemos hacer para disponer de lo citado anteriormente es añadir en el <head> el siguiente código javascript:

<script type="text/javascript">
contenido_textarea = ""
num_caracteres_permitidos = 25

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>

Esta función será la encargada de comprobar cuantos carácteres faltan hasta llegar a la longitud máxima, en este caso 25.

El formulario debe estar dentro del <body> y debe ser algo como lo que sigue:

<form action="index.php" 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" disabled> (*) N&uacute;mero m&aacute;ximo de car&aacute;cteres = 25</td>
       </tr>
   </table>
</form>

Si nos fijamos en el tag <textarea> podemos ver que utilizamos onKeyDown y onKeyUp para validar la longitud en cada caracter pulsado o borrado.

A la misma vez que vamos comprobando los carácteres pulsados también vamos contando el número de carácteres con la función javascript «cuenta()». Su valor se va mostrando en el input con id=»caracteres».

Ver ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(2 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “Controlar el número de carácteres permitidos en un textarea”

Controlar el número de carácteres permitidos en un textarea con jQuery | Jose Aguilar dice:

11/02/2013 a las 13:42

[…] Esta misma funcionalidad la puedes ver realizada con simple javascript: Controlar el número de carácteres permitidos en un textarea con javascript […]

Responder
Sheridan Dinkle dice:

03/02/2012 a las 9:12

You have mentioned very interesting points! ps decent web site.

Responder