How do I restrict "+ - e , ." from HTML number input?

Question

I've got a HTML number input element: <input type="number">. Problem is that I can also input following characters: + - e E , . which I don't want the user to be able to write.

How do I restrict these?

Possible duplicate of [how do i block or restrict special characters from input fields with jquery?](http://stackoverflow.com/questions/895659/how-do-i-block-or-restrict-special-characters-from-input-fields-with-jquery) — elementzero23, Jan 18 '17 at 08:47
This is a really good question and I would hope W3C will come up with a HTML solution someday. — Turbo, Dec 02 '17 at 01:28

Dani · Accepted Answer · 2020-10-22T10:49:51.360

14

Edit: Boris K has got an even better answer.

Original answer:

This would be a way to accomplish that:

var ageInput = document.getElementById("age")

ageInput.addEventListener("keydown", function(e) {
  // prevent: "e", "=", ",", "-", "."
  if ([69, 187, 188, 189, 190].includes(e.keyCode)) {
    e.preventDefault();
  }
})

<input type="number" id="age">

edited Oct 22 '20 at 10:49

answered Jan 18 '17 at 09:00

Dani

2,448
8
27
44

Following [JSFiddle](https://jsfiddle.net/wg5cev7s/) did it for me (works in my app). I changed it up quite a bit but your answer gave me the clue. Thanks – Wulthan Jan 18 '17 at 11:09
@Wulthan, this fiddle will restrict `backspace` too – Shekhar Pankaj Oct 24 '17 at 10:52
perfect! best one – Santiago Rebella Oct 31 '17 at 16:51
But, this wouldn't work on "on paste", right? Is there a way to combine the key down and paste together? – panda_heart_3 Oct 21 '20 at 20:40

Boris K · Answer 2 · 2017-01-18T08:56:57.033

2

You shouldn't rely only on <input type="number">, because that would work only in moderns browsers with different behaviours depending on the browser.

Use jQuery to perform additional checks (with a regexp):

$('#my-input').keypress(function() {

    var inputValue = $(this).val();
    var reg = /^\d+$/;

    if (reg.test(inputValue)){
        alert("input value is integer");
    } else {
        alert("input value is not an integer");
    }
});

edited Jan 18 '17 at 08:56

answered Jan 18 '17 at 08:49

Boris K

1,469
9
29

is `data` equals with `inputValue`? – vp_arth Jan 18 '17 at 08:52
`'1' === parseInt('1', 10)` is false. – vp_arth Jan 18 '17 at 08:55
Right, you might better use a regexp then. – Boris K Jan 18 '17 at 08:57
I agree with this. Thanks for the addition. I'll edit my accepted answer – Dani Oct 22 '20 at 10:49

Andrew Stalker · Answer 3 · 2017-01-18T09:20:42.117

To restrict those values, catch the keypress event with javascript, and prevent those characters from being entered. We capture the keyCode from the event, and restrict the input to not allow those characters by their ASCII codes.

document.getElementById('my-number-input').onkeypress = function(e) {
  if(!e) e = window.event;
  var keyCode = e.keyCode || e.which;
  if(!((keyCode >= 48 && keyCode <= 57) || 
  (keyCode >=96 && keyCode <= 105))) {
    e.preventDefault(); //This stops the character being entered.
  }
}

The IF statement above states that if the keycode is not in the range of 0-9 on the keyboard (including the number pad), then do not add the character to the input.

How do I restrict "+ - e , ." from HTML number input?

3 Answers3