javascript - ejemplo - textarea maxlength

Cómo imponer maxlength en textArea en HTML usando JavaScript

Question

Me gustaría tener alguna funcionalidad por la cual si escribo

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

impondrá automáticamente la longitud máxima en el área de texto. Si es posible, no proporcione la solución en jQuery.

Nota: Esto se puede hacer si hago algo como esto:

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

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

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

Pero el punto es que no quiero escribir en KeyPress y onKeyUp cada vez que declaro un campo de texto.

Answer 1

El atributo maxlength es compatible con Internet Explorer 10, Firefox, Chrome y Safari.

Nota: El atributo maxlength de la etiqueta <textarea> no es compatible con Internet Explorer 9 y versiones anteriores, ni con Opera.

desde HTML maxlength Atributo w3schools.com

Para IE8 o versiones anteriores, debe usar lo siguiente

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can''t be got,I don''t know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

PD

El atributo maxlength de la etiqueta <input> es compatible con todos los principales navegadores.

desde HTML maxlength Atributo w3schools.com

Answer 2

El pequeño problema con el código anterior es que val () no desencadena el evento change (), por lo que si usa backbone.js (u otro marco para el enlace del modelo), el modelo no se actualizará.

Estoy publicando la solución que funcionó muy bien para mí.

$(function () {

    $(document).on(''keyup'', ''.ie8 textarea[maxlength], .ie9 textarea[maxlength]'', function (e) {
        var maxLength = $(this).attr(''maxlength'');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger(''change'');
        }
        return true;
    });

});

Answer 3

Esta solución evita el problema en IE, donde se elimina el último carácter cuando se agrega un carácter en el medio del texto. También funciona bien con otros navegadores.

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

La validación de mi formulario se ocupa de cualquier problema en el que el usuario haya pegado (parece ser un problema en IE) el texto que excede la longitud máxima del área de texto.

Answer 4

Este es un código ajustado que acabo de utilizar en mi sitio. Se ha mejorado para mostrar la cantidad de caracteres restantes al usuario.

(Perdón nuevamente a OP que no solicitó jQuery. Pero en serio, ¿quién no usa jQuery en estos días?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(//r/n|/r|/n/g, "/r/n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

NO ha sido probado con caracteres internacionales de varios bytes, así que no estoy seguro de cómo funciona exactamente con esos.

Answer 5

Esto es mucho más fácil:

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

Answer 6

HTML5 agrega un atributo maxlength al elemento textarea , así:

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Esto actualmente es compatible con Chrome 13, FF 5 y Safari 5. No es sorprendente que esto no sea compatible con IE 9. (Probado en Win 7)

Answer 7

Implementé el comportamiento de maxlength en textarea recientemente y me maxlength el problema descrito en esta pregunta: Chrome cuenta caracteres incorrectos en textarea con el atributo de longitud máxima .

Entonces, todas las implementaciones enumeradas aquí funcionarán con pocos errores. Para resolver este problema agrego .replace(/(/r/n|/n|/r)/g, "11") antes de .length . Y lo tuve en cuenta al cortar cuerda.

Terminé con algo como esto:

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(/r/n|/n|/r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

No estoy seguro si resuelve el problema completamente, pero funciona para mí por ahora.

Answer 8

Intenta usar este ejemplo de código:

$("#TextAreaID1").bind(''input propertychange'', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});

Answer 9

Mejor solución en comparación con recortar el valor del área de texto.

$(''textarea[maxlength]'').live(''keypress'', function(e) {
    var maxlength = $(this).attr(''maxlength'');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});

Answer 10

Pruebe este jQuery que funciona en IE9, FF, Chrome y proporciona una cuenta regresiva para los usuarios:

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>

Answer 11

Puede usar jQuery para que sea fácil y claro

DEMO JSFiddle

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

Se prueba en Firefox , Google Chrome y Opera

Answer 12

Sé que quiere evitar jQuery, pero como la solución requiere JavaScript, esta solución (que usa jQuery 1.4) es la más completa y robusta.

Inspirado por, pero una mejora sobre la respuesta de Dana Woodman:

Los cambios de esa respuesta son: Simplificado y más genérico, usando jQuery.live y también no estableciendo val si la longitud es correcta (conduce a las teclas de flecha que funcionan en IE, y aceleración notable en IE):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$(''textarea[maxlength]'').live(''keyup blur'', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr(''maxlength'');
    var val = $(this).val();

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

EDITAR: Versión actualizada para jQuery 1.7+ , usando on lugar de live

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$(''textarea[maxlength]'').on(''keyup blur'', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr(''maxlength'');
    var val = $(this).val();

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

Answer 13

También agregue el siguiente evento para tratar de pegar en el área de texto:

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert(''Maximum length exceeded: '' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...

Answer 14

Actualizar Usa la solución de Eirik usando .live() ya que es un poco más robusto.

Aunque quería una solución que no utilizaba jQuery, pensé en agregar una para que cualquiera que encuentre esta página a través de Google y busque una solución jQuery-esque:

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $(''textarea[maxlength]'').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr(''maxlength'');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind(''keyup'', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Espero que les sea útil Googlers allá afuera ...

Answer 15

window.onload = function() { 
  var txts = document.getElementsByTagName(''TEXTAREA''); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert(''Maximum length exceeded: '' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}