CODEWITHSUNDEEP
javascripthtml
MadMaxa
MadMaxa

Reputation: 92

Maxlength not working when using Javascript number inputs

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>

Upvotes: 1

Views: 971

Answers (3)

Chrillewoodz
Chrillewoodz

Reputation: 28328

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.

Upvotes: 0

Raja Priyan
Raja Priyan

Reputation: 415

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

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

Upvotes: 1

Pratik
Pratik

Reputation: 954

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;
  }

Upvotes: 1

Related Questions