Allowing only numeric typing

Question

I Have this JavaScript code to allow only numeric input on textboxes

    function CheckNumeric(e) {

        if (window.event) // IE 
        {
            if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) {
                event.returnValue = false;
                return false;
            }
        }
        else { // Fire Fox
            if ((e.which < 48 || e.which > 57) & e.which != 8) {
                e.preventDefault();
                return false;
            }
        }
    }

The problem is that it's also preventing the "TAB" button! which I like to allow.

How can I do that?

Christian Westman · Accepted Answer · 2012-12-06T17:58:06.430

I would change the CheckNumeric function into something like this and use a regex to determine valid/invalid input. /[0-9\t\b]+/ matches numbers, tabs and backspace. if you also want to allow space change it to /[0-9\t\b\s]+/

function CheckNumeric(e)
{
    var charCode = e.charCode || e.keyCode;
    var character = String.fromCharCode(charCode);
    if(!character.match(/[0-9\t\b]+/))
    {
        if(window.event)
            event.returnValue = false;
        else
            e.preventDefault();
        return false;
    }
    return true;
}

additionally, in order to capture keycodes correctly you should bind to the onKeyPress event instead of onKeyDown as it will not provide correct keycodes for the numeric keypad.

<input type="text" onkeypress="CheckNumeric(event)"/>

score 0 · Answer 2 · answered Dec 06 '12 at 17:36

KeyCode 8 is for backspace. I dont know if you added by mistake or not:

function CheckNumeric(e) {

    if (window.event) // IE 
    {
        if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8 & e.keyCode != 9) {
            event.returnValue = false;
            return false;
        }
    }
    else { // Fire Fox
        if ((e.which < 48 || e.which > 57) & e.which != 8  & e.which != 9) {
            e.preventDefault();
            return false;
        }
    }
}

score 0 · Answer 3 · edited May 23 '17 at 11:46

The approach I prefer using here (cleaner code, simpler logic) is to use an html5 attribute (either type="number" or pattern="[0-9]*" would work well).

See Disable webkit's spin buttons on input type="number"? if you decide to use <input type="number"> and want to disable the spinners.

If you really need to support older browsers with this behavior, consider using a shim that supports html5 form attributes.

Allowing only numeric typing

3 Answers3