(Miles Johnson) -> Blog -> Tag -> Input

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.