How to allow only numeric (0-9) in HTML inputbox using jQuery?

avatar
566    1 year ago

I am creating a web page where I have an input text field in which I want to allow only numeric characters like (0,1,2,3,4,5...9) 0-9.

How can I do this using jQuery?

Answers { 1 }
avatar
1 year ago

The inputFilter plugin from the below script allows you to use any kind of input filter on a text <input>, including various numeric filters. This will correctly handle Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the cursor position, all keyboard layouts and all browsers since IE 9Note that you still must do server side validation!

Try it yourself on JSFiddle.

// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  };
}(jQuery));

Usage:

// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value);
});

Some input filters you might want to use:

  • Integer values (both positive and negative):
    /^-?\d*$/.test(value)
  • Integer values (positive only):
    /^\d*$/.test(value)
  • Integer values (positive and up to a particular limit):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Floating point values (allowing both . and , as decimal separator):
    /^-?\d*[.,]?\d*$/.test(value)
  • Currency values (i.e. at most two decimal places):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • Hexadecimal values:
    /^[0-9a-f]*$/i.test(value)

Pure JavaScript

jQuery isn't actually needed for this, you can do the same thing with pure JavaScript as well. See this answer or try it yourself on JSFiddle.

HTML 5

HTML 5 has a native solution with <input type="number"> (see the specification), but note that browser support varies:

  • Most browsers will only validate the input when submitting the form, and not when typing.
  • Most mobile browsers don't support the stepmin and max attributes.
  • Chrome (version 71.0.3578.98) still allows the user to enter the characters e and E into the field. Also see this question.
  • Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter anytext into the field.

Try it yourself on w3schools.com.

More complex validation options

If you want to do some other validation bits and pieces, this could be handy: