How can I disable keyboard input in form validation for JavaScript
Question
I want to validate a text box so that it only takes numeric values. If the user tries to press alphabet keys, the keystrokes must be ignored, ie nothing can be typed in.
How can this be done?
7 answers
solution1
1 2011-06-30 13:17:48
Use this code in your HTML page:
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>
solution2
0 2011-06-30 13:14:06
You might need to use the onkeypress event.
An example which does the opposite thing (input field accepts everything but numbers) can be found here: http://www.w3schools.com/jsref/event_onkeypress.asp
solution3
0 2011-06-30 13:16:24
how about somthing similar to this
//Bind this keypress function to all of the input tags
$("input").keypress(function (evt) {
//Deterime where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (IsNumeric(charCode)) { //key's keycode
return false;
}
});
solution4
0 2011-06-30 13:25:39
W3C recommends using the oninput event, which is future proof and takes care of devices which do not have a keyboard. If your targeted browsers support oninput , do not use any keyboard events.
solution5
0 2011-06-30 13:26:02
With HTML5 in modern browsers you can use <input type="number"> (see Dive Into HTML5 for some examples). You'll need a fallback for older browsers though, so here you go. This works in all major browsers. It won't prevent the user from pasting or dragging in non-numeric content, however.
jsFiddle: http://jsfiddle.net/JCUT2/
var textBox = document.getElementById("foo");
textBox.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (/\D/.test(String.fromCharCode(charCode))) {
return false;
}
};
solution6
0 2011-06-30 13:26:49
You can make a javascript function that you will call everytime you press a key in your textbox (with the onkeypress event).
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
solution7
0 2011-06-30 13:42:04
I recently was dealing with the same situation (but opposite -- I wanted only alphabetic characters). I initially considered simply using the keypress event, but that has a few fatal flaws:
- The user can still paste invalid data into the field;
- The user can drag invalid text into the field;
- Cancelling the keypress invalidates certain valid input (eg, hotkeys) unless you take special care regarding meta keys (which I'm not positive is possible to do in a robust, complete, and portable manner);
- Autocomplete;
- And so on for any number of non-keyboard input methods.
Fortunately, at least Firefox and IE9 have a solution: they have an input event that fires for any manner of input method, whether it's a keystroke or a paste operation or whatever. IE<9 doesn't have that, but they do have a paste event to handle the most common use-case, but take care that it fires before the paste actually occurs, so you have to cancel the paste and then do most of the (IE-specific) paste work manually (just a couple of lines of code, but still a bit annoying).
I was developing for an internal network that didn't support other browsers, so I haven't researched what WebKit has available. The DOM Level 3 spec has a textinput event , but at least Firefox does not support it yet.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.