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, i.e nothing can be typed in.

How can this be done?

Why bother? You only care if the field is valid when the form is posted, it doesn't matter what value it has in the meantime. — RobG
– RobG, Commented Jun 30, 2011 at 14:22
Try using onchange and a hidden input. Every time they change the input (such as copy-paste/type), it should run your script. If the input is valid, commit the change to the hidden input, otherwise, revert to the previous state by copying from the hidden input. — AI Generated Response
– AI Generated Response, Commented Aug 3, 2011 at 21:57

Iman · Accepted Answer · 2011-06-30 13:26:26Z

1

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>

edited Jun 30, 2011 at 13:26

answered Jun 30, 2011 at 13:17

Iman

5332 gold badges8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vadim Belyaev · Accepted Answer · 2011-06-30 13:14:06Z

0

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

answered Jun 30, 2011 at 13:14

Vadim Belyaev

2,9572 gold badges20 silver badges29 bronze badges

Comments

Rob · Accepted Answer · 2011-06-30 13:16:24Z

0

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

answered Jun 30, 2011 at 13:16

Rob

1,2552 gold badges21 silver badges45 bronze badges

Comments

Wolfgang Kuehn · Accepted Answer · 2011-06-30 13:25:39Z

0

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.

answered Jun 30, 2011 at 13:25

Wolfgang Kuehn

13k3 gold badges37 silver badges49 bronze badges

4 Comments

Tim Down Over a year ago

I agree, but it's not supported in IE < 9 and it's not cancellable.

Josh Over a year ago

@Tim It doesn't really need to be cancellable -- just adjust the element's value appropriately.

Tim Down Over a year ago

@user349433: Adjusting the input's value after the event has fired requires knowledge of its value immediately prior to the event and doing potentially complicated comparisons.

Josh Over a year ago

@Tim: Not necessarily. For example, in the case of this particular question, you could just do this.value = this.value.replace(/\D+/g, '').

Spirit6666 · Accepted Answer · 2011-06-30 13:26:49Z

0

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

answered Jun 30, 2011 at 13:26

Spirit6666

363 bronze badges

Comments

Josh · Accepted Answer · 2011-06-30 13:42:04Z

0

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.

answered Jun 30, 2011 at 13:42

Josh

9925 silver badges5 bronze badges

1 Comment

Tim Down Over a year ago

I'm not sure the textInput event is going to gain any more traction now that the input event exists (it's implemented in WebKit and Opera, by the way).

Bill the Lizard · Accepted Answer · 2012-08-05 02:35:53Z

0

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

edited Aug 5, 2012 at 2:35

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered Jun 30, 2011 at 13:26

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Collectives™ on Stack Overflow

How can I disable keyboard input in form validation for JavaScript

7 Answers 7

Comments

Comments

Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related