How can I prevent entry of non-numerals a text field?

Question

I found this question. However, most of the answers intercept the key press, check the key code, and stop the event if it isn't an acceptable key code.

There are a some problems with that.

• A common bug among all the answers is that shift key combinations are not prevented so users can enter stuff like "@" or "&".

• Users can still paste in bad values from the clipboard.

• When you start messing around with the key press event, the webpage starts doing weird, unexpected things. For example if the field has focus and the user tries to reload the page by pressing command-R it won't work. Or they can't tab out of the field.

I would like a solution that allows the keypress, then checks the entered value against a regex and removes unwanted characters.

I'm looking for a solution along these lines:

• Doesn't intercept the keypress event.

• Ideally uses a regex after the keypress.

• OK if it uses jQuery.

• Doesn't require installing a plug-in.

I tried this function:

  $('input.numerals_only').keypress(function() {
    var v = $(this).val();
    var no_nonnumerals = v.replace( /[^0-9]/, '' );
    $(this).val(no_nonnumerals);
  });

But that doesn't work. I'm still able to type in letters.

Any info on why it doesn't work? How could I modify it so it works? Other suggestions?

Answer 1

I wrote a jQuery plugin to do this. Demo and code here http://brianjaeger.com/process.php

It uses a regular expression to validate whatever you want.

There are a few issues:

• it's a plugin (however, you could suck out the code and plunk it into your other JavaScript if you want. -its easier just to use as plugin)
• Unfortunately there is no way to limit pasted information directly (across all browsers) - My solution to this was to add validation on focus change as well as keypress.

Answer 2

If you use keyup and also blur you should handle most cases. Someone keys in text and also if they paste in a value into the text box. As the blur function will remove the bad values as well.

$('input.numerals_only').keyup(AllowOnlyNumber).blur(AllowOnlyNumber);

function AllowOnlyNumber()
{
    var v = $(this).val();
    var no_nonnumerals = v.replace(/[^0-9]/g, '');
    $(this).val(no_nonnumerals); 
}

Of course if html5 is an option you could always do:

<input type="number"/>

jsfiddle example.

Answer 3

The thing your regexp is missing, which is why it didn’t work for keypresses neither, is the g flag for a global regexp check.

Use var no_nonnumerals = v.replace( /[^0-9]/g, '' );

Answer 4

Use the keyup event. It is triggered after the key is processed by the browser:

$('#txtInput')
    .keyup(function(ev) {
        var newValue = this.value.replace(/[^0-9]/, '');
        $(this).val(newValue);
    });

Answer 5

If you use keyup instead of keypress it will always remove the incorrect characters.

You can also use this to actually block the events:

$('input.numerals_only').keypress(function(event) {
    if(event.keyCode < 48 || event.keyCode > 57){
        return false;
    }
});