96

How to allow only numbers to be written in this textbox ?

<input type="text" class="textfield" value="" id="extra7" name="extra7">
5
  • 4
    What do you class as a number? Are these numbers 12.3, -4, V, six? Sep 3, 2011 at 21:07
  • 8
    Not sure if a jquery question would be a duplicate. Javascript != jQuery
    – Evert
    Sep 3, 2011 at 21:31
  • 9
    This isn't an exact duplicate of the referenced question. This targets a javascript answer while the other targets a jQuery answer. Different audiences, different solutions.
    – Rob Hruska
    Sep 4, 2011 at 2:20
  • Shortest Answer is onkeypress='return event.charCode>31 && (event.charCode <= 48 || event.charCode >= 57)'
    – CyberAbhay
    May 16, 2017 at 7:51
  • const onlyNumbers = (event) => { event.preventDefault(); const asciiCode = event.target.value.charCodeAt(0); (asciiCode < 48 || asciiCode > 57) ? event.target.value = '' : event.target.value = event.target.value; }
    – Said Pc
    Aug 5, 2021 at 15:01

3 Answers 3

277

You could subscribe for the onkeypress event:

<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />

and then define the isNumber function:

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

You can see it in action here.

23
  • 3
    I'm not sure how to interpret your if clause. If it's larger than 57, it's always larger than 31. I think you can eliminate the parentheses.
    – pimvdb
    Sep 3, 2011 at 21:04
  • 19
    That doesn't work if you c/p some text Aug 23, 2013 at 9:35
  • 4
    I can still copy and paste non numeric values in the textbox
    – Baaju
    Dec 25, 2013 at 3:54
  • 1
    Doesn't work on mobile (Android + Chrome) Feb 4, 2017 at 11:41
  • 2
    Just accepting numeric values from the alphabetic part of keyboard. Why this function is not accepting numeric keypad keys situated on the right side of keyboard?
    – Rashid
    Sep 25, 2017 at 7:54
51

With HTML5 you can do

<input type="number">

You can also use a regex pattern to limit the input text.

<input type="text" pattern="^[0-9]*$" />
9
  • 31
    This does not prevent non-numeric characters from being entered.
    – MyNameIsKo
    Jun 12, 2015 at 14:14
  • 1
    @MyNameIsKo it should, maybe you are using a client that does not support this kind of HTML5 feature?
    – powtac
    Jun 12, 2015 at 14:18
  • 1
    it does not work in either Chrome or Firefox. You may be referring to submission validation of non-numeric characters, which does work properly with HTML5. The original question, however, was interested in preventing the non-numeric entry entirely. I'm pretty sure JavaScript is still the only way to do this.
    – MyNameIsKo
    Jun 12, 2015 at 14:28
  • 5
    Allows "." , which may not be desirable
    – ALLSYED
    Aug 12, 2016 at 10:27
  • 2
    The type number is not supporting on Firefox.
    – PKPrabu
    Sep 18, 2019 at 10:14
16

You also can use some HTML5 attributes, some browsers might already take advantage of them (type="number" min="0").

Whatever you do, remember to re-check your inputs on the server side: you can never assume the client-side validation has been performed.

1
  • 2
    The type number and min are not supporting on Firefox
    – PKPrabu
    Sep 18, 2019 at 10:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.