Input type number maxlength 5

Question

I want to limit the input type number to maximum 5 numbers, I am using below code, which is working well, only issue is that for backspace I have to use event.keycode which I dont want to use. Is there any alternative apart from usking keycode of backspace.

var input = document.getElementById('input');
input.addEventListener('keypress',showData,false)
function showData(event)
{
   if(event.target.value.length<=5)
   {
      return true;
   }
   else
   {
      event.preventDefault();
   }

}

Why not use `keyup` instead of `keypress`? Then you don't need to worry about backspace — mikeyq6, Mar 18 '16 at 11:31
This answer describes how to limit input type text to only allow numeric characters. You can extend this and use maxlength=5 afterwards. http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input — henrikmerlander, Mar 18 '16 at 11:36

score 3 · Accepted Answer · answered Mar 18 '16 at 11:41

3

If you want it so if the user tries to type more than 5 numbers it only keeps the 5 numbers:

input.oninput = function() {
    if (this.value.length > 5) {
        this.value = this.value.slice(0,5); 
    }
}

answered Mar 18 '16 at 11:41

Thanks that helped – user3045179 Mar 18 '16 at 11:45
1

@user3045179 You could simplify it inside the oninput function to: `this.value = (this.value.length > 5) ? this.value.slice(0,5) : this.value;` – Mar 18 '16 at 11:47

score 0 · Answer 2 · answered Mar 18 '16 at 11:28

0

Why don't you just use:

<input type="number" max="99999">

This will still not stop a user from manually entering a value larger than 99999, but the input element will be invalid.

answered Mar 18 '16 at 11:28

henrikmerlander

1,554
13
20

Yes I checked that but requirement is that it should be visible that input is not more than 5 digit – user3045179 Mar 18 '16 at 11:33

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

<input type="number" max="99999" />

How can I limit possible inputs in a HTML5 "number" element?

edited May 23 '17 at 12:24

Community

1
1

answered Mar 18 '16 at 11:29

a45b

489
3
19

I have searched stackoverflow, but I found the min and max solution only and unfortunately, this is not what i require. – user3045179 Mar 18 '16 at 11:35
Remove the min attribute. Or user jquery validator plugin – a45b Mar 18 '16 at 11:52

score 0 · Answer 4 · answered Mar 18 '16 at 12:06

0

<form>
<input required type="text" name="inputname" pattern="[0-9]{5,}">
  <input type="submit" value="submit">
</form>

answered Mar 18 '16 at 12:06

Niklesh Raut

34,013
16
75
109

Input type number maxlength 5

4 Answers4