¿Cuál es la mejor manera de emular un atributo de entrada HTML "maxlength" en un área de texto HTML?

Question

Una entrada de texto HTML tiene un atributo llamado "maxlength", implementado por los navegadores, que si se establece bloquea la entrada del usuario después de un cierto número de caracteres.

Un elemento HTML textarea, por otro lado, no tiene este atributo. Mi objetivo es emular el comportamiento de maxlength en un área de texto HTML. Requisitos:

• Como mínimo, muestre (CSS change) que el usuario escribió demasiados caracteres.
• Lo ideal es evitar que el usuario escriba más caracteres, como sucede con una entrada de HTML.

Se entiende que la validación del lado del servidor debe verificar la longitud de nuevo. Aquí me estoy enfocando solo en la parte del lado del cliente.

Mi pregunta es: ¿cuál es la forma más limpia del lado del cliente de emular maxlength en un área de texto HTML? Idealmente, apunte a una pieza de JavaScript comprobada y de código abierto que haya utilizado.

Answer 1

Mira los comentarios en este sitio, con una cuenta atrás. Lo he hecho así antes, y es simple y efectivo. Stack   Overflow hace un buen uso del color también.

Quizás no tenga suficientes representantes para ver el cuadro de comentarios.

Se ejecuta una pequeña cuenta atrás mientras escribe. Cuando se acerca a un umbral, el color cambia de amarillo a rojo. Todos usan JavaScript, y asumo el evento keyup del área de texto.

EDITAR: ¿Qué tal si lo haces con jQuery?

<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     setMaxLength(); 
     $("textarea.checkMax").bind("click mouseover keyup change", function(){checkMaxLength(this.id); }) 
    }); 

    function setMaxLength() { 
     $("textarea.checkMax").each(function(i){ 
      intMax = $(this).attr("maxlength"); 
      $(this).after("<div><span id='"+this.id+"Counter'>"+intMax+"</span> remaining</div>"); 
     }); 
    } 

    function checkMaxLength(strID){ 
     intCount = $("#"+strID).val().length; 
     intMax = $("#"+strID).attr("maxlength"); 
     strID = "#"+strID+"Counter"; 
     $(strID).text(parseInt(intMax) - parseInt(intCount)); 
     if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //Good 
     if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //Warning at 80% 
     if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //Over 
    } 
</script> 

Y el HTML es

<textarea id="text" maxlength="250" class="checkMax"></textarea> 

Answer 2

Aquí es código JavaScript que funciona bien para mí:

onBlur="if (this.value.length > 500) { alert('The notes field only allows 500 characters. You have ' + this.value.length + ' characters.'); this.focus(); return false; }" 

Answer 3

Creo que el siguiente sea lo más "limpia" como se pone. Cree un controlador de eventos en Javascript que tome como entrada el evento keydown y el campo textarea. Compruebe la longitud del texto en el campo en este controlador y devuelva falso si se alcanza la longitud máxima. (Por supuesto hacer cualquier cambio de estilo css antes de regresar). Devuelve verdadero de lo contrario. El textarea debería verse así.

<textarea onkeydown="return checkMaxLength(event, this, 1000);"></textarea> 

Answer 4

PPK's Textarea Maxlength script está disponible en su sitio. Nada sofisticado, simplemente el viejo JavaScript.

Puede usarlo fácilmente como punto de partida y realizar cambios para cumplir con el requisito de "notificación" de CSS.

Tenga en cuenta que el autor afirma: "El propósito de mi script no es hacer cumplir la longitud máxima, aunque puede cambiarse fácilmente para hacerlo. Sin embargo, decidí restringir mi script para dar un recordatorio cortés cuando el usuario excede la cantidad máxima de caracteres."

ACTUALIZACIÓN: Debido a linkrot en el artículo adjunto, aquí está el código que una vez existió en ese enlace:

HTML:

<textarea id="text" name="text" maxlength="1250"></textarea> 

JS:

function setMaxLength() { 
    var x = document.getElementsByTagName('textarea'); 
    var counter = document.createElement('div'); 
    counter.className = 'counter'; 
    for (var i=0;i<x.length;i++) { 
     if (x[i].getAttribute('maxlength')) { 
      var counterClone = counter.cloneNode(true); 
      counterClone.relatedElement = x[i]; 
      counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength'); 
      x[i].parentNode.insertBefore(counterClone,x[i].nextSibling); 
      x[i].relatedElement = counterClone.getElementsByTagName('span')[0]; 

      x[i].onkeyup = x[i].onchange = checkMaxLength; 
      x[i].onkeyup(); 
     } 
    } 
} 

function checkMaxLength() { 
    var maxLength = this.getAttribute('maxlength'); 
    var currentLength = this.value.length; 
    if (currentLength > maxLength) 
     this.relatedElement.className = 'toomuch'; 
    else 
     this.relatedElement.className = ''; 
    this.relatedElement.firstChild.nodeValue = currentLength; 
    // not innerHTML 
} 

Simplemente llame a la función setMaxLength(); en la carga.

Answer 5

Utilice un marco de JavaScript (Prototype, jQuery, etc.) para que tenga soporte para eventos entre navegadores. Escriba un trazador de líneas en keyup para evitar que el usuario entre en la longitud máxima.

Nota: También deberá verificar el lado del servidor de la longitud.

Answer 6

Encontré una buena secuencia de comandos here que evita que el usuario ingrese más texto después de que la longitud de la cadena de entrada excede el parámetro MaxLen, tiene el innegable beneficio de permanecer fuera de la vista del usuario.

Mi problema con esa secuencia de comandos era que también bloqueaba las teclas de navegación (flechas, inicio, final) junto con el retroceso y eliminar, así que lo modifiqué levemente; de ​​lo contrario, el usuario no podría eliminar el texto que ingresó el límite establecido por MaxLen (que sería un poco hilarante: P).

Javascript:

function imposeMaxLength(Event, Object, MaxLen) 
{ 
     return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40)) 
} 

Y el HTML que va con ella:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"> 

el usuario puede superar esta limitación al pegar texto en el área de texto, pero que puede resolverse fácilmente en el interior imposeMaxLength.

Answer 7

Me imagino que puedo probar esto, solo otra manera de hacer lo mismo. Me gusta esta forma de hacerlo porque podrías incluir esto en algún código para verificar si estás ejecutando en IE, ya que maxlength sí funciona en áreas de texto en los navegadores webkit y gecko. Depende de la propiedad maxlength que se establece en el elemento textarea en html. También porque funciona realmente ya que la propiedad maxlength funciona en el navegador de forma predeterminada, lo que impide que el usuario agregue más caracteres que los especificados.

$(document).ready(function() { 


$('textarea').on('keyup', function() { 
    // Store the maxlength and value of the field. 
    if (!maxlength) { 
     var maxlength = $(this).attr('maxlength'); 
    } 
    var val = $(this).val(); 
    var vallength = val.length; 

    // alert 
    if (vallength >= maxlength) { 


     alert('Please limit your response to ' + maxlength + ' characters'); 
     $(this).blur(); 
    } 


    // Trim the field if it has content over the maxlength. 
    if (vallength > maxlength) { 
     $(this).val(val.slice(0, maxlength)); 
    } 
}); 

//remove maxlength on blur so that we can reset it later. 
$('textarea').on('blur', function() { 
     delete maxlength; 
    }); 
}); 

Answer 8

Aquí es un plugin de jQuery que yo uso llamado "Simplemente contable" que le permite añadir un contador a un área de texto. Una de las características es que le permite establecer un número máximo de caracteres permitidos en un campo y lo impone para que el usuario no pueda exceder ese límite.

Aquí está la página de GitHub para Simply Contable:
https://github.com/aaronrussell/jquery-simply-countable/

Usted podría utilizar de esta manera ...

$('#my_textarea').simplyCountable({ 
    counter: '#counter', 
    maxCount: 140, 
    strictMax: true 
});