javascript - bootstrap - Longitud máxima para HTML<textarea>

textarea value html

Question

¿Cómo restringir la cantidad máxima de caracteres que se pueden ingresar en un HTML <textarea> ? Estoy buscando una solución de navegador cruzado.

Answer 1

HTML5 ahora permite el atributo maxlength en <textarea> .

Es compatible con todos los navegadores excepto IE <= 9 y iOS Safari 8.4. Vea la tabla de soporte en caniuse.com .

Answer 2

La etiqueta TEXTAREA no tiene un atributo MAXLENGTH como lo hace una etiqueta INPUT , al menos no en la mayoría de los navegadores estándar. Una forma muy simple y efectiva de limitar el número de caracteres que se pueden escribir en una etiqueta TEXTAREA es:

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

Nota: onKeyPress , evitará que se presione un botón , cualquier botón, incluida la tecla de retroceso.

Esto funciona porque la expresión booleana compara la longitud del campo antes de que el nuevo carácter se agregue a la longitud máxima que desea (50 en este ejemplo, use el suyo aquí), y devuelve verdadero si hay espacio para uno más, false si no. Si se devuelve falso en la mayoría de los eventos, se cancela la acción predeterminada. Entonces, si la longitud actual ya es 50 (o más), el controlador devuelve falso, la acción KeyPress se cancela y el carácter no se agrega.

Una mosca en la sopa es la posibilidad de pegar en un TEXTAREA , que no causa que el evento KeyPress se dispare, eludiendo este control. Internet Explorer 5+ contiene un evento onPaste cuyo controlador puede contener el cheque. Sin embargo, tenga en cuenta que también debe tener en cuenta cuántos caracteres están esperando en el portapapeles para saber si el total lo llevará por encima del límite o no. Afortunadamente, IE también contiene un objeto del portapapeles desde el objeto de la ventana. 1 Por lo tanto:

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData(''Text'').length) < 50 );"></textarea>

Nuevamente, el evento onPaste y el objeto clipboardData solo son IE 5+. Para una solución de OnChange navegadores, solo tendrá que usar un manejador OnChange o OnBlur para verificar la longitud y manejarla como quiera (truncar el valor en silencio, notificar al usuario, etc.). Desafortunadamente, esto no detecta el error mientras está sucediendo, solo cuando el usuario intenta abandonar el campo, que no es tan amigable.

Fuente

Además, hay otra forma aquí, que incluye un script terminado que podrías incluir en tu página:

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

Answer 3

$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
if ($(this).val().length > maxlen) {  
  return false;
}  
})
});  

Conjunto de referencia maxlength en Html Textarea