maxlength non funziona se il valore è impostato dal codice js

Question

Ho il seguente blocco HTML nella mia pagina.

<input type="text" id="fillingInput"/> 
<input type="text" id="filledInput" maxlength="5"/> 
<input type="button" onclick="$('#filledInput').val($('#fillingInput').val());"/> 

quando il pulsante viene premuto, il valore di fillingInput è impostato come rapporto qualità-filledInput. Ma la lunghezza massima non viene considerata mentre si imposta un valore come questo. Qualche soluzione?

Answer 1

un modo per ottenere questo è ... rimuovere tutti i personaggi dopo il quinto personaggio. utilizzando substring()

<input type="button" id="add" /> 

JS

$('#add').click(function(){ 
    var str=$('#fillingInput').val(); 
    if(str.length > 5) { 
     str = str.substring(0,5); 

    } 
    $('#filledInput').val(str); 
}); 

fiddle ..

si raccomanda di non utilizzare javascript inline.

Answer 2

Prova slice:

<input type="button" 
    onclick="$('#filledInput').val($('#fillingInput').val().slice(0,5));"/> 

Answer 3

Prova questa

$(document).ready(function() { 
$('#add').click(function() { 
    var str = $('#fillingInput').val(); 
    if (str.length > 5) { 
     str = str.substring(0, 5); 
     $('#filledInput').val(str); 
    } 

    }); 
}); 

Answer 4

se si utilizza jQuery è possibile aggiungere un "valHook" che si aggancia in ogni chiamata di .VAL()

$.valHooks.input = { 
    set: function(element, value) { 
     if ("maxLength" in element && value.length > element.maxLength) 
      value = value.substr(0, element.maxLength); 
     element.value = value; 
     return true; 
    } 
};