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

textarea value javascript

Question

Una entrada de texto HTML tiene un atributo llamado "maxlength", implementado por navegadores, que si se configura 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 (cambio de CSS) que el usuario escribió demasiados caracteres.
• Idealmente, impida que el usuario escriba más caracteres, como ocurre en una entrada de HTML.

Se entiende que la validación del lado del servidor debe verificar la longitud nuevamente. 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

Creo que lo siguiente es lo más "limpio" posible. 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 2

Encontré un buen script aquí 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 la eliminación, así que lo modifiqué levemente; de ​​lo contrario, el usuario no podría eliminar el texto ingresado si alcanzaba 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 lo acompaña:

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

El usuario aún puede evitar esta limitación pegando texto en el área de texto, pero eso se puede resolver fácilmente dentro de imposeMaxLength.

Answer 3

Aquí está el 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 4

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

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

Ejecuta una pequeña cuenta regresiva mientras escribes. 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 tenerlo hecho 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 5

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

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

Answer 6

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

Puede usar esto 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 educado cuando el usuario excede la cantidad máxima de personajes ".

ACTUALIZACIÓN: debido a linkrot en el artículo adjunto, aquí está el código que alguna 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 setMaxLength(); función en carga.

Answer 7

Me imagino que puedo intentarlo, solo otra forma 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í hay un plugin jQuery que uso llamado "Simply Countable" que le permite agregar 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 Countable:
https://github.com/aaronrussell/jquery-simply-countable/

Lo usarías así ...

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