Ok, here’s a fairly basic one – how to force a textbox to accept only numeric input. Somebody asked me this today on a support call so I did a few quick lookups online and found the solutions listed rather unsatisfying. The main problem with most of the examples I could dig up was that they only include numeric values, but that provides a rather lame user experience. You need to still allow basic operational keys for a textbox – navigation keys, backspace and delete, tab/shift tab and the Enter key - to work or else the textbox will feel very different than a standard text box.

Yes, there are plug-ins that allow masked input easily enough but most are fixed width which is difficult to do with plain number input. So I took a few minutes to write a small reusable plug-in that handles this scenario. Imagine you have a couple of textboxes on a form like this:

With the plug-in in place in your page or an external .js file you can now simply use a selector to apply it:

$(".numberinput").forceNumeric();

The plug-in basically goes through each selected element and hooks up a keydown() event handler. When a key is pressed the handler is fired and the keyCode of the event object is sent. Recall that jQuery normalizes the JavaScript Event object between browsers. The code basically white-lists a few key codes and rejects all others. It returns true to indicate the keypress is to go through or false to eat the keystroke and not process it which effectively removes it.

Simple and low tech, and it works without too much change of typical text box behavior.

This is a great example of how to do a plugin for JQuery. You might want to look at jQuery AlphaNumeric by Paulo P. Marinas. This plugin limits input in all sorts of cool ways.The example page is at http://www.manukalodgenz.com/js/

Yes this doesn't work for *validating* numeric input, so if you paste this doesn't do the trick. But that's not the focus of this little plug-in - that's validation plug-ins are for. The goal here is to restrict the user input while typing so that invalid characters are not entered.

Definitely could do with additional characters though for separators, decimal points and negative number symbols. Will add that when I get a minute.

Updated the snippet with a few additional features based on comment feedback. Added numeric keypad and allow for decimal/thousand separator. No attempt at formatting is made.

Lot of comments that this won't solve all numeric entry problems and that's very true - it's not meant to. This is supposed to act as an input aid. You will still need to validate the final input for proper formatting etc. either client side or on the server.

This is interesting javascript, I learned a lot of things, thanks, but there is a *big* problem: on French keyboards (and probably for many other countries as well), you have to press Shift in order to type digits. So your plugin actually allows French users to type things like &é"' but they cannot type any digits at all. This is very frustrating, and a showstopper as far as I am concerned. Sorry...
Since people have so many different keyboard layouts, I would recommend never using the keyCode at all (unless perhaps for things like games, where you don't care what the actual character is). I would recommend instead the validation approach: let the user type whatever she likes, and fix the result upon validation (or when the input loses focus) by reading the actual content of the field, and using regular expressions.
Cheers.