How can I disable keyboard input in form validation for JavaScript
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, i.e nothing can be typed in.
Ho开发者_如何转开发w can this be done?
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>
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
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;
}
});
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.
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;
}
Code sample source
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 (e.g., 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.
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;
}
};
精彩评论