jQuery: limitar número caracteres de un textarea
5 comentarios
Acabo de crear un script cuya función es la de limitar el número caracteres en un campo textarea con un contador de caracteres (letras, números, etc…) restantes permitidas… He utilizado nuevamente la librería jQuery y he creado este pequeño script que tiene un contador debajo del textarea que muestra número de caracteres restantes.
Si no queréis utilizar plugins y buscáis una solución más casera, puede que os sirva.
En este ejemplo he puesto el límite del textarea en 50 letras:
$(document).ready(function() {
var total_letras = 50;
$('#comentarios').keyup(function() {
var longitud = $(this).val().length;
var resto = total_letras - longitud;
$('#numero').html(resto);
if(resto <= 0){
$('#comentarios').attr("maxlength", 50);
}
});
});
var total_letras = 50;
$('#comentarios').keyup(function() {
var longitud = $(this).val().length;
var resto = total_letras - longitud;
$('#numero').html(resto);
if(resto <= 0){
$('#comentarios').attr("maxlength", 50);
}
});
});
5 Comentarios
Cristian Aguirre, el 10/12/2010 a las 01:34:35
versión con opción de retornar false cuando se haya llegado a 0 caracteres disponibles:
$(document).ready(function() {
var total_letras = 50;
$(‘#description’).keydown(function() {
var longitud = $(this).val().length;
var resto = total_letras – longitud;
if(resto < 0){
//aquí se podria activar algun cartel de error por ej: $('#error-descripcion').show();
return false;
}
$('#resto').html(resto);
});
});
Luis Garcia, el 24/02/2011 a las 00:00:41
Mira fijate que si sigo el demo si funciona como dices… pero si descargo el codigo.. y cambio el valor de 50 a 5…. me sigue dejando escribir y la cuenta regresiva se convierte en negativa… que pasa????
David, el 15/04/2011 a las 13:22:46
simple:
el ha escrito: $(‘#comentarios’).attr(“maxlength”, 50);
y es mejor:
$(‘#comentarios’).attr(“maxlength”, total_letras);
asi cuando cambias el valor de total letras, también lo cambia al asignar el atributo.
En cualquier caso maxlenght no es un atributo válido para un textarea
Angelio Manuel, el 12/05/2011 a las 18:19:48
Con la siguiente modificación únicamente se ha de indicar en el total letras el número de caracteres que queremos que sea el máximo. Aún si pegamos nos limitara a pj. 100 primeros caracteres.
var total_letras = 100;
$(‘#comentario’).attr(“maxlength”, total_letras);
$(‘#numero’).html(“0″);
$(‘#otrosDestin’).keyup(function() {
var longitud = $(this).val().length;
var resto = total_letras – longitud;
$(‘#numero’).html(resto);
});
jesus, el 18/06/2011 a las 05:51:14
Gracias por el codigdo, lo voy a probar..