maxlength nie działa, jeśli wartość jest ustawiona z kodu js

Question

Mam następujący blok HTML na mojej stronie.

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

po kliknięciu przycisku, wartość fillingInput jest ustawiony jako wartość dla filledInput. Ale maksymalna długość nie jest brana pod uwagę podczas ustawiania takiej wartości. Jakieś rozwiązanie?

Answer 1

Jednym ze sposobów uzyskania tego jest ... usunięcie wszystkich znaków po piątej postaci. stosując 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 ..

zaleca się, aby nie używać inline JavaScript.

Answer 2

Spróbuj slice:

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

Answer 3

Spróbuj

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

    }); 
}); 

Answer 4

jeśli używasz jQuery można dodać "valHook", który przechwytuje do każdego wezwania .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; 
    } 
};