CODEWITHSUNDEEP
javascriptjqueryhtmlmaxlength
Sureshkumar Natarajan
Sureshkumar Natarajan

Reputation: 538

maxlength not working if value is set from js code

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?

Upvotes: 7

Views: 2043

Answers (4)

lloiser
lloiser

Reputation: 1191

if you are using jQuery you can add a "valHook" which hooks into each call of .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;
    }
};

Upvotes: 2

bipen
bipen

Reputation: 36551

one way to get this is ... removing all charaters after 5th character. using 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 ..

it is recommended not to use inline javascript.

Upvotes: 2

Boss
Boss

Reputation: 473

Try this 

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

   });
});

Upvotes: 2

skolima
skolima

Reputation: 32724

Try slice:

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

Upvotes: 5

Related Questions