Controlar el número de carácteres permitidos en un textarea con jQuery
En este artículo vamos a ver como controlar el número de carácteres permitidos en un textarea empleando para ello jQuery. 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 a los permitidos. El control de los caracteres escritos se hace con jQuery, 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.
El campo de texto que queramos controlar el número de caracteres deberá tener un id único para poderlo manipular por jQuery y una limitación del número de caracteres como por ejemplo:
<textarea rows="7" cols="40" id="comment" maxlength="25"></textarea>
La clave del asunto recae en el código que se ejecuta en el lado del cliente, es decir, el jQuery que deberemos añadir dentro de la etiqueta <head> de la página:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var max_chars = 25;
$('#max').html(max_chars);
$('#comment').keyup(function() {
var chars = $(this).val().length;
var diff = max_chars - chars;
$('#contador').html(diff);
});
});
</script>
Estamos incluyendo la librería jQuery y los scripts necesarios para llevar a cabo la acción.
El documento o página está esperando a que se comience a escribir dentro del campo de texto o textarea con identificador único id=»comment». El número de caracteres que se vayan escribiendo lo vamos guardando en una variable y también hacemos un cálculo de la diferencia entre los caracteres máximos permitidos y la longitud de lo que se ha escrito. Tendremos un contador que se va actualizando en cada tecla pulsada mostrando en cada momento lo que queda hasta llegar al máximo permitido.
Esta misma funcionalidad la puedes ver realizada con simple javascript: Controlar el número de carácteres permitidos en un textarea con javascript
Autor
¿Buscas trabajo de programador?
6 respuestas a “Controlar el número de carácteres permitidos en un textarea con jQuery”
Deja una respuesta
53 artículos que te podrían interesar
y a fuera con input type=»number» ¿Como seria???
Hola,
Para un input puede valer la misma idea. Tan solo debes poner un identificador del input y hacer correctamente la llamada keyup.
Saluods
Lo que dicio Patricio es cierto, aúnque no vel la necesidad de insultar, el caso es que ese código de jquery no controla la cantidad de caracteres ingresados, solo está mostrando la diferencia entre var max_chars = 80 y los caracteres que se han ingresado.
La funcion que creaste solo sirve para ir decontando caracteres y mostralos en el input de abajo, ya que restringir la cantidad de caracteres los hace el atributo maxlength=»25″ (/MULA)
Excelente, muchas gracias, ya lo probe y funciona muy bien, gracias por compartir.
Esta fallando algo
escribe algo y haz enter otro poco y haz enter luego elimina unos cuantos caracteres y vuelve a escribirlos hasta su limite no llegara a cero. pruebalo