Maxlength not working when using Javascript number inputs

Question

I have a slight problem with inserting numbers in the input box. To be more specific.I use the custom made keypad that shows on the screen,and the numbers can only be written in the input box by using that same keypad,with the max of 5 numbers that can be written.But the HTML maxlength atrribute in this case doesn't work.It works when I try to write the number using the actual keyboard,but when inserting with a custom keypad it won't work.

The question is how can I make it to work?

<script>
  function addNumber(element) {

    document.getElementById('child').value = document.getElementById('child').value + element.value;

  }
  function deleteNumber(){
	
	document.getElementById('child').value='';
	
	
}
</script>

<div class='form-group'>
  <div id="staticParent">
    <div class='col-md-6'>
      <input class='form-control' id='child' name="username" type='text' maxlength="5" readonly='readonly' />
      <input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); />
      <input type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />
      <input type='button' class='fbutton' name='delete' value='Delete' onClick=deleteNumber(this); />
    </div>
  </div>

Very bad HTML formatting, and this is not related to jQuery at all. — Raptor
– Raptor, Commented Jul 20, 2015 at 7:06
Those validation are applied only when user enters the value... not when you make the changes programtically — Arun P Johny
– Arun P Johny, Commented Jul 20, 2015 at 7:08

Pratik · Accepted Answer · 2015-07-20 07:10:02Z

1

you can replace your addNumber function with below one, That will solve your problem.

 function addNumber(element) {
    var value1 = document.getElementById('child').value + element.value;
    if(value1.length > 5) return false;
    document.getElementById('child').value = value1;
  }

answered Jul 20, 2015 at 7:10

Pratik

9544 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raja Priyan · Accepted Answer · 2015-07-20 07:13:34Z

1

you can try this maxlength=5.you will remove ""

<input class='form-control' id='child' name="username" type='text' maxlength=5 readonly='readonly' />

answered Jul 20, 2015 at 7:13

Raja Priyan

4152 silver badges14 bronze badges

Comments

Chrillewoodz · Accepted Answer · 2015-07-20 07:22:22Z

Since maxlength only works if the user actually uses the real keyboard and not for programatically changing the value, you can't do it like that.

To get around it simply apply a check in your addNumber function:

function addNumber() {

  var input = document.getElementById('child');

  if (input.value.length > 5) {
    return false;
  }
  else {
    // Do stuff
  }
}

This won't add a new number unless the input length is less or equal to 5.

Also you shouldn't call things with the onclick attribute. Instead add your event listeners with addEventListener:

var addBtns = document.getElementsByClassName('fbutton');

for (var i = 0; i < addBtns.length; i++) {
  addBtns[i].addEventListener('click', addNumber);
}

Note that you have to use a loop to add the event listeners since addBtns is an array.

Collectives™ on Stack Overflow

Maxlength not working when using Javascript number inputs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related