43
¿Cómo puedo configurar el maxlength en un textarea? ¿Y por qué maxlength no funciona correctamente en textarea?Establecer maxlength en HTML Textarea
A
Respuesta
87
Antes de HTML5, tenemos una manera fácil pero se puede trabajar: en primer lugar establecer un atributo maxlength en el elemento de área de texto:
<textarea maxlength='250' name=''></textarea>
A continuación, utilice JavaScript para limitar la entrada del usuario:
$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
})
});
asegurarse que los eventos se unen tanto el "entrada" y "propertyChange" para que funcione en varios navegadores como Firefox/Safari e IE.
16
Si está utilizando HTML 5, debe especificarlo en su declaración DOCTYPE.
Para un documento válido de HTML 5, se debe comenzar con:
<!DOCTYPE html>
Antes de HTML 5, el elemento textarea no tienen un atributo maxlength.
Esto se puede ver en el DTD/spec:
<!ELEMENT TEXTAREA - - (#PCDATA) -- multi-line text field -->
<!ATTLIST TEXTAREA
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #IMPLIED
rows NUMBER #REQUIRED
cols NUMBER #REQUIRED
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
onselect %Script; #IMPLIED -- some text was selected --
onchange %Script; #IMPLIED -- the element value was changed --
%reserved; -- reserved for possible future use --
>
Con el fin de limitar el número de caracteres escritos en un textarea, usted tendrá que usar javascript con el evento onChange. Luego puede contar la cantidad de caracteres y no permitir escribir más.
Here es un debate en profundidad sobre la entrada de texto y cómo usar el servidor y las secuencias de comandos del lado del cliente para limitar el tamaño.
Here es otra muestra.
0
Antes de HTML5 solo es posible verificar esto con JavaScript o mediante una verificación del lado del servidor (mejor, porque JavaScript obviamente solo funciona con JavaScript habilitado ...). No existe un atributo nativo de longitud máxima para textareas.
Desde HTML5 es un atributo válido, por lo que la definición de su doctype como HTML5 puede ayudar. No sé si todos los navegadores soportan este atributo, sin embargo:
<!DOCTYPE html>
7
forma sencilla de hacerlo maxlength para la caja de texto en HTML 4 es:
<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>
cambiar el "100" sin embargo a muchos caracteres que desee
+8
Hay otras formas distintas de tipear para agregar texto en un área de texto, como pegar. Esta solución probablemente no funcione para ellos. –
+3
No solo, evitará que borre los caracteres una vez pegados o cargados en un número que exceda su tamaño máximo (tendría que seleccionar y cortar con el mouse ...). –
+0
El enlace de eventos en línea de JavaScript tampoco es la forma más semántica de implementar estas restricciones. –
6
Como dije en un comentario a la respuesta de aqingsao, no funciona cuando el textarea tiene caracteres de nueva línea, al menos en Windows.
he cambiar ligeramente su respuesta así:
$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
//I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
//Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
var newlines = ($(this).val().match(/\n/g) || []).length
if ($(this).val().length + newlines > maxLength) {
$(this).val($(this).val().substring(0, maxLength - newlines));
}
})
});
Ahora cuando intento pegar una gran cantidad de datos con los saltos de línea, lo entiendo exactamente el número correcto de caracteres.
-1
cambiar el tamaño: ninguno; Esta propiedad corrige el área de texto y lo enlaza. utiliza esta propiedad de CSS ID su área de texto textarea.gave una identificación y en nombre de esa identificación puede utilizar esta propiedad css.
0
probar esto
$(function(){
$("textarea[maxlength]")
.keydown(function(event){
return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
})
.keyup(function(event){
var limit = $(this).attr("maxlength");
if (!limit) return;
if (this.value.length <= limit) return true;
else {
this.value = this.value.substr(0,limit);
return false;
}
});
});
Para mí funciona realmente perfecto sin saltar/mostrar caracteres adicionales; funciona exactamente igual que en la entrada maxlength
+1
Esto no funcionará correctamente en todos los navegadores Las líneas nuevas duras en los elementos '
Recurrir al uso de HTML5 no es una respuesta. Esperamos compatibilidad con varios navegadores. Eso hace de esto la respuesta más correcta. – 3Dom
Tenga en cuenta que esta solución no es javascript "puro", requiere el uso de JQuery. (En caso de que lo intente sin JQuery, y se pregunte por qué no funciona). –
Desafortunadamente, esto no funciona como se esperaba para las nuevas líneas en el área de texto. Supongo que JavaScript está tratando una línea nueva como un carácter en lugar de dos, así que cuando intento insertar una cadena de "longitud máxima" en la base de datos, aparece un error. – Coxy