maxlength not working if value is set from js code

Question

I am having the following HTML block in my page.

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

when the button is clicked, the value of fillingInput is set as value for filledInput. But the maxlength is not considered while setting value like this. Any solution?

Answer 1

Try slice:

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

Answer 2

Try this

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

   });
});