Restricting an input field to numeric only

I was always amazed that a feature like this wasn't available in HTML 4 (but is in HTML 5). It would be really cool to restrict an input field to only accept numeric characters (or alphabetic), without the need for JavaScript. But I digress as I had to use JavaScript anyways. I first tried to steer away from using an event, but found it difficult to not allow the letter without it showing up in the input field first, or finding it too strange to regex the non-numeric characters out. So I caved in and used the event handlers. Here's a quick JavaScript snippet that will make an input field only accept numeric characters, a backspace and a tab.

function numericOnly(event) {
	var key = window.event.keyCode || event.keyCode;
	return ((key >= 48 && key <= 57) || (key >= 96 && key <= 105) || (key == 8) || (key == 9));
}

The function will accept the 0-9 range of numbers and all numbers on the numlock keypad. However, this will not work in all locales since some keyboard layouts are different but will work on all basic QWERTY keyboards. Finally, to implement the function, you would use onkeydown, as it checks the event before the character shows up (unlike onkeyup or onkeypress).

<input name="field" onkeydown="return numericOnly(event);" />

There are probably better and more thought out alternatives, so if you have one please post it in the comments. Would be nice to get multiple variations.

5 Comments

  • @Robust - Yes that is correct. When I wrote this function, I *didn't* want them to post anything besides numeric values, including periods and commas.

    So yes, you would most likely have to add more fields for the special characters you want to add. Maybe even add a 2nd argument for an accepted list of values then convert them:

    return numericOnly(event, ['.', ',']);
    Miles Johnson ⋅
  • Hi Miles,

    Thanks for you remark, you are right regular expression will not prevent keystroke from showing up as characters before being validated, I use regular expression inside your function not something alone

    But preventing keystroke from being typed if they are not in the set {0,1,...,9, ABCDEFG, backspace and tab} is a little bit annoying because it prevents user from typing negative number, decimal numbers or both, and allow her/him to type numeric string like 000123 which looks like a code not like a number, and also hexadecimal is allowed while octal are not allowed.. etc

    everything depends on the need and how we define numeric string.

    But I think I can start with your numericOnly() event handler to build my customized numeric string. I do like it

    Let me imagine a solution:

    allowed keys are the tab, the backspace, the dot, the plus sign, the minus sign, the O letter, the 0123456789ABCDEFG hexadecimal characters.... so regular expression is used after being sure that the character is allowed otherwise the function returns false so nothing will be typed... so the function should return false if the character is not allowed at all or if the allowed key is gonna make the numeric expression invalid

    So, what do you think?
    Robust Solution ⋅
  • @Robust - Regex was my first choice. But unlike regex, the event will completely stop the alphabetic characters from showing up, where as regex would have to validate the letter afterwards. Unless of course you can provide me with a snippet saying otherwise
    Miles Johnson ⋅
  • I forgot to comment on the code,

    I prefer to use a JavaScript regular expression to oblige keystroke to be numeric. but even someone may trick the text box by inserting the invalid value using the right click mouse button... (I will not do it myself
    Robust Solution ⋅
  • thanks for sharing this info

    good for user experience when javascript is disabled. But I still believe
    that it is useless for the server-side developer when he can not trust data coming from the client without validation.

    Always RSS me
    Robust Solution ⋅