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
Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.
Try it yourself on JSFiddle.
There is no native jQuery implementation for this, but you can filter the input values of a text with the following
inputFilter
plugin (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, and all browsers since IE 9):
// Restricts input for the set of matched elements to the given inputFilter function.
(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);
} else {
this.value = "";
}
});
};
}(jQuery));
You can now use the inputFilter
plugin to install an input filter:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!
jQuery isn't actually needed for this, you can do the same thing with pure JavaScript as well. See this answer.
HTML 5 has a native solution with (see the specification), but note that browser support varies:
step
, min
and max
attributes.e
and E
into the field. Also see this question.Try it yourself on w3schools.com.