configuración maxlength usando javascript

Question

Estoy tratando de establecer el maxlength en los campos de entrada de forma dinámica mediante JavaScript. Aparentemente ese es un problema en IE, y encontré parte de la solución.

$("input#title").get(0).setAttribute("max_length", 25); 
$("input#title").get(0).setAttribute(
         "onkeypress", 
         "return limitMe(event, this)"); 

function limitMe(evt, txt) { 
    if (evt.which && evt.which == 8) return true; 
    else return (txt.value.length < txt.getAttribute("max_length"); 
} 

Funciona en Firefox, pero no en IE por alguna razón. Sin embargo, funciona en los campos de entrada establecidos como esto:

<input type="text" max_length="25" onkeypress="return limitMe(event, this);"/> 

Pero desde los campos de entrada se crean dinámicamente, no puedo hacer esto ... ¿Alguna idea?

Answer 1

Si está utilizando jQuery, ¿por qué no hacer un uso completo de sus abstracciones?

E.g.

En lugar de:

$("input#title").get(0).setAttribute("max_length", 25); 
$("input#title").get(0).setAttribute(
         "onkeypress", 
         "return limitMe(event, this)"); 
function limitMe(evt, txt) { 
    if (evt.which && evt.which == 8) return true; 
    else return (txt.value.length < txt.getAttribute("max_length"); 
} 

Haga esto:

$('input#title').attr('maxLength','25').keypress(limitMe); 

function limitMe(e) { 
    if (e.keyCode == 8) { return true; } 
    return this.value.length < $(this).attr("maxLength"); 
} 

---

Editar: La razón por la que no funciona en IE es probablemente debido a cómo se ha instalado el controlador de 'onKeyPress', a través de setAttribute. - Esta no es la forma correcta de registrar manejadores de eventos.

Answer 2

El atributo que está buscando es maxlength, no max_length. Ver here.

Answer 3

No olvide que si establece el maxlength a través de JavaScript, alguien más podría cambiar fácilmente la duración máxima a lo que quiera. Aún deberá validar los datos enviados en el servidor.

Answer 4

Debido a que tuve algunos problemas con la respuesta de @James, escribí algo que funcionó incluso al copiar y pegar cosas, y especialmente cuando se trabaja con IE8 y abajo. Mi implementación usa jQuery y sus eventos en vivo.

jQuery(function() { 
    $('body').on('keydown.maxlength_fix', 'textarea[maxlength]', function (e) { 
     var $this = $(this); 
     window.setTimeout(function() { 
      var val = $this.val(); 
      var maxlength = $this.attr('maxlength'); 
      if (val.length > maxlength) { 
       $this.val(val.substr(0, maxlength)); 
      } 
     }, 4); 
    }); 
}); 

Answer 5

Mi código también imprime los caracteres escritos/máx., Ignore esa parte.

$("[maxlength]").bind("keyup focusin", function(){ 
    var maxkey = $(this).attr("maxlength"); 
    var length = $(this).val().length; 
    var value = $(this).val(); 
    $(this).parent().find(".counter").text(length+"/"+maxkey); 
    if (length > maxkey) $(this).val(value.substring(0, maxkey)); 
}).bind("focusout", function(){$(this).parent().find(".counter").text("")}); 

Answer 6

IE entre mayúsculas y minúsculas en setAttribute() y sólo "maxLength" funciona ...

var el=document.createElement('input'); el.setAttribute('maxLength',25); 

Answer 7

Todas las respuestas aquí se basa en eventos de pulsación/pegar. Aquí está mi solución utilizando el evento input:

$('input').on('input', onInput); 

var inputValue = ''; 

function onInput(e) { 
    if(e.currentTarget.value.length > 30) { 
     e.currentTarget.value = titleValue; 
     return; 
    } 

    inputValue = e.currentTarget.value; 
}