Only allowing 0-9 numbers in input type="number" (exlude eE.+- etc..)

Question

I am having a bit of a hard time figuring out how to only allow user to input numbers 0-9 in an <input type="number" /> as it also allwos other things like eE.+ - etc..

Looked at regex solutions here on stack overflow and each one seems to have an issue i.e. if there are no numbers in an input you can type in any of unwanted characters, if you typed in a number you can't delete it completely as there needs to be at least 1 digit.

using keycodes introduces an issue as event.target.value is not avaliable on key events, it seems to only be available in onchange, however in this case e.which is not avaliable to check key pressed.

What are your exact requirements? You would like to have an input that allows one or more numeric characters (but not special characters)? — Kevin Farrugia, Jan 18 '17 at 09:31

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

Do you mean you only want users to be able to enter digits 0-9?

var input = document.getElementById("only-digits");
input.onkeydown = function(e) {
  if (48 > e.which || e.which > 57)
    if (e.key.length === 1)
      e.preventDefault();
};

<input type="number" id="only-digits">

I'm making sure that the key the user presses is only a 0, 1, 2, ... 9 character using the range of their ASCII values.

If the key they pressed was outside of that range, then I make sure it is a word character and then I prevent it from being entered into the text field.

edited May 23 '17 at 11:53

Community

1
1

answered Jan 18 '17 at 09:46

theonlygusti

11,032
11
64
119

This prevents the user from deleting numbers, pressing return or tabbing to another input. – MT0 Jan 18 '17 at 10:01
Not my downvote but I still can't tab away from the input or use the backspace key to delete characters (Chrome 54) – MT0 Jan 18 '17 at 11:25
Now it allows multiple `.` characters. – MT0 Jan 18 '17 at 11:40

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

you can use the regex attribute on the html input field:

<input pattern="[0-9]*">

this allows only for 0-9 characters, zero or multiple times

<input pattern="[0-9]+">

this allows only for 0-9 characters, 1 or multiple times

update

it doesn't work with type="number" though, if you want it to work with this, you need to use javascript. See the other answers for this.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 18 '17 at 09:32

Joel Harkes

10,975
3
46
65

https://jsfiddle.net/4gpf5vv3/ still able to enter all of those unwanted values :/ – Ilja Jan 18 '17 at 09:36
[`pattern` only works on `text`, `search`, `tel`, `url`, `email`, or `password`.](https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-pattern) – lonesomeday Jan 18 '17 at 09:38
@Ilja but you can't submit it, it tests on submit: https://jsfiddle.net/4gpf5vv3/1/ – Joel Harkes Jan 18 '17 at 09:39
@JoelHarkes Try entering `1e6` in your jsfiddle. – lonesomeday Jan 18 '17 at 09:41
Thats interesting because `.` is not allowed, try this: https://jsfiddle.net/4gpf5vv3/2/ – Joel Harkes Jan 18 '17 at 09:42
This is only a validation thing, it doesn't stop the letters from actually being entered. – theonlygusti Jan 18 '17 at 11:35
jup, then you should use javascript, but everything can be disabled by the user, you should always validate in the backend! – Joel Harkes Jan 18 '17 at 11:56

score 0 · Answer 3 · answered Jan 18 '17 at 09:55

You can prevent user when he/she enters any character other than Number

See the below code HTML

<input type=number class="numberOnlyInput" oncopy="return false" onpaste="return false" ondrag="return false">

JQuery

$(document).on('keypress','.numberOnlyInput',function(e){
  if(!(e.keyCode >=48 && e.keyCode <=57) ){
        e.preventDefault();
  }
});

You can see the demo here: https://jsfiddle.net/cnosh74e/

Only allowing 0-9 numbers in input type="number" (exlude eE.+- etc..)

3 Answers3

update