Don't allow typing alphabetic characters in a

Question

I need to have a textbox, where, whenever typed inside should ONLY allow numbers [0-9]. I've used type="number" which definitely holds the client side validation but also allows to type other alphabets. I can do it by tracking each keydown and matching with regex but I was wondering if there is any way I can restrict to type using only html tags and NOT defining any functions in JavaScript to compare in each keydown?

Code not sufficient to do so is:

    <input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">

Any help is appreciated.

I've seen a similar issue here : [http://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers](http://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers). It is suggested to use the pattern attribute : ``. User js-coder says : "`\d` is the regular expression for a number, `*` means that it accepts more than one of them" — Lapixel, Aug 14 '13 at 06:55
@krishna that won't help :). Lapidouce, i had tried it but it just validates with regex but won't stop user to type into the textbox. — user79307, Aug 15 '13 at 05:04
I would suggest allowing the user to enter alphabetic characters and show a validation error. I have yet to understand why most designers/developers think it's a good idea to block the keyboard. 1. why make the user guess why the keyboard is not working ? A user that knows it's a number doesn't need it. A user that doesn't know it should be a number thinks the keyboard is not working. 2. If the user inputs 123AZ45R6, he will get 123456. He will not always notice something has happened (since most users don't look at the screen while typing). The resulting 123456 has no meaning anyway. — Cesar, Feb 14 '19 at 12:42

score 23 · Accepted Answer · edited May 23 '17 at 12:10

23

You can use jquery.numeric plugin.

See here similar question.

$(document).ready(function(){
   $(".numeric").numeric();
});

edited May 23 '17 at 12:10

Community

1
1

answered Aug 14 '13 at 06:00

mihai.ciorobea

741
5
12

15

`$('input[type=number]').numeric()` would target all of them, without needing extra classes. – Brigand Aug 14 '13 at 06:02
I think I'm marking this as an answer as this solves the problem. However, for my particular case, I would just need to use it once in my project and would not like to include jquery.numeric.js if it can be done just using HTML5 and jquery.js. Just if there's something :). – user79307 Aug 14 '13 at 07:11
is this helping ? http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number – mihai.ciorobea Aug 14 '13 at 08:03
Nope, already tried that. Its still letting us to type alphabets. Anyways, thanks for the help. :) – user79307 Aug 14 '13 at 08:30
Actually I like it better with the ".numeric" class, because if I make my inputs "type='number'" they get that annoying up / down set of buttons on the right. – Nahn Oct 16 '15 at 21:44

Sandip · Answer 2 · 2016-04-08T10:42:33.773

17

Try this

define javascript function

function for allowed number with decimal as below

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
        return false;

    return true;
}

function for allowed only number not decimal is as below

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if ((charCode < 48 || charCode > 57))
        return false;

    return true;
}

Html

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">

edited Apr 08 '16 at 10:42

answered Aug 14 '13 at 06:32

Sandip

372
1
7

1

Thanks @Sandip, but I was looking after something that will make it not using any javascript function. :) – user79307 Aug 15 '13 at 05:10
@Sandip, your code is allowing to enter decimal, which is not number. – Santosh Prasad Sah Apr 07 '16 at 09:43
This seems to prevent the delete key – Chris Jul 29 '17 at 00:03
Doesn't work on IE and need to account windows numpad as well because it has different keycodes. – Nikita Chernykh Jul 11 '18 at 15:03

score 3 · Answer 3 · answered May 12 '15 at 15:21

input type="number" for getting Numeric Keyboard on Mobile Device

Java-Script

function numbersonly(myfield, e)
        {
            var key;
            var keychar;

            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;

            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;

            // only one decimal point
            else if ((keychar == "."))
            {
                if (myfield.value.indexOf(keychar) > -1)
                    return false;
            }
            else
                return false;
        }

Html

<input type="number" onkeypress="return numbersonly(this, event)"/>

score 1 · Answer 4 · answered Aug 14 '13 at 06:01

1

Browsers behave differently. In Chrome the following code:

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
  <input type="submit">

will work for you only if it is in a form and only after the user clicks the submit button.

answered Aug 14 '13 at 06:01

Greg Neils

19
2

yeah but this is not what I was looking for, it wont restrict user to type other alphabets in anyway. Alternative solution would be answer given by @mihai.coirobea by using element.numeric() by including jquery.numeric.js. – user79307 Aug 15 '13 at 05:09

score 1 · Answer 5 · answered Aug 14 '13 at 06:19

1

If you don't mind using a bit of Javascript, this might help JS-BIN Demo:

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>

answered Aug 14 '13 at 06:19

Akhil Sekharan

12,467
7
40
57

score 1 · Answer 6 · answered Aug 14 '13 at 06:49

1

You will have to have your input box inside a form and with a submit button. The form validation happens at the submission of the form. See a demo here: http://jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>

answered Aug 14 '13 at 06:49

ds345

737
3
8
17

your fiddle allowing character "e" – Sa E Chowdary Oct 14 '16 at 06:01

score 1 · Answer 7 · answered Jan 25 '17 at 09:14

1

Try this:-

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });

answered Jan 25 '17 at 09:14

user7409534

11
2

score 1 · Answer 8 · answered Feb 14 '17 at 08:27

1

I notice that the question was posted around 2013. Anyways, now type="number" is restricting alphabets and special characters other that 'e','.' and '+' as 'e' and '.' are considered for exponential numbers like 1.2e+12, '.' is considered for decimal numbers.

answered Feb 14 '17 at 08:27

Monika Tiruchanur

21
1

3

latest firefox as of this date does not support this – mxmissile Dec 20 '18 at 18:53

Ankush · Answer 9 · 2018-12-16T06:24:34.433

0

just add - min="0" max="9" onkeydown="return false;"

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">

edited Dec 16 '18 at 06:24

answered Dec 16 '18 at 06:17

Ankush

1
2

Don't allow typing alphabetic characters in a

9 Answers9

Linked