开发者

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;
   }
};
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜