maxlength не работает, если значение установлено из js-кода

Question

У меня есть следующий HTML-блок на моей странице.

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

при нажатии на кнопку, значение fillingInput устанавливается в качестве значения для filledInput. Но максимальная длина не учитывается при установке значения, подобного этому. Любое решение?

Answer 1

один способ получить это ... удаление всех символов после 5-го символа. используя 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 ..

рекомендуется не использовать встроенный JavaScript.

Answer 2

Попробуйте slice:

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

Answer 3

Попробуйте

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

    }); 
}); 

Answer 4

если вы используете JQuery вы можете добавить "valHook", который перехватывает в каждом вызове .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; 
    } 
};