Is an unobtrusive module of JavaScript code that allows exactly this sort of filtering. It looks for <input type=text> elements that have an additional (nonstandard) attribute named data-allowed-chars. The module registers handlers for textinput, textInput, and keypress events on any such text field to restrict input to characters that appear i…

InputFilter.js

/**
 * InputFilter.js: unobtrusive filtering of keystrokes for <input> elements
 *
 * This module finds all <input type="text"> elements in the document that
 * have an "data-allowed-chars" attribute. It registers keypress, textInput, and
 * textinput event handlers for any such element to restrict the user's input
 * so that only characters that appear in the value of the attribute may be
 * entered. If the <input> element also has an attribute named "data-messageid",
 * the value of that attribute is taken to be the id of another document
 * element. If the user types a character that is not allowed, the message
 * element is made visible. If the user types a character that is allowed, the
 * message element is hidden. This message id element is intended to offer
 * an explanation to the user of why her keystroke was rejected. It should
 * typically be styled with CSS so that it is initially invisible.
 *
 * Here is sample HTML that uses this module.
 * Zipcode: <input id="zip" type="text"
 * data-allowed-chars="0123456789" data-messageid="zipwarn">
 * <span id="zipwarn" style="color:red;visibility:hidden">Digits only</span>
 *
 * This module is purely unobtrusive: it does not define any symbols in
 * the global namespace.
 */
whenReady(function () { // Run this function when the document is loaded
 // Find all <input> elements
 var inputelts = document.getElementsByTagName("input");
 // Loop through them all
 for(var i = 0 ; i < inputelts.length; i++) {
 var elt = inputelts[i];
 // Skip those that aren't text fields or that don't have
 // a data-allowed-chars attribute.
 if (elt.type != "text" || !elt.getAttribute("data-allowed-chars"))
 continue;
 
 // Register our event handler function on this input element
 // keypress is a legacy event handler that works everywhere.
 // textInput (mixed-case) is supported by Safari and Chrome in 2010.
 // textinput (lowercase) is the version in the DOM Level 3 Events draft.
 if (elt.addEventListener) {
 elt.addEventListener("keypress", filter, false);
 elt.addEventListener("textInput", filter, false);
 elt.addEventListener("textinput", filter, false);
 }
 else { // textinput not supported versions of IE w/o addEventListener()
 elt.attachEvent("onkeypress", filter); 
 }
 }
 // This is the keypress and textInput handler that filters the user's input
 function filter(event) {
 // Get the event object and the target element target
 var e = event || window.event; // Standard or IE model
 var target = e.target || e.srcElement; // Standard or IE model
 var text = null; // The text that was entered
 // Get the character or text that was entered
 if (e.type === "textinput" || e.type === "textInput") text = e.data;
 else { // This was a legacy keypress event
 // Firefox uses charCode for printable key press events
 var code = e.charCode || e.keyCode;
 // If this keystroke is a function key of any kind, do not filter it
 if (code < 32 || // ASCII control character
 e.charCode == 0 || // Function key (Firefox only)
 e.ctrlKey || e.altKey) // Modifier key held down
 return; // Don't filter this event
 // Convert character code into a string
 var text = String.fromCharCode(code);
 }
 
 // Now look up information we need from this input element
 var allowed = target.getAttribute("data-allowed-chars"); // Legal chars
 var messageid = target.getAttribute("data-messageid"); // Message id
 if (messageid) // If there is a message id, get the element
 var messageElement = document.getElementById(messageid);
 
 // Loop through the characters of the input text
 for(var i = 0; i < text.length; i++) {
 var c = text.charAt(i);
 if (allowed.indexOf(c) == -1) { // Is this a disallowed character?
 // Display the message element, if there is one
 if (messageElement) messageElement.style.visibility = "visible";
 // Cancel the default action so the text isn't inserted
 if (e.preventDefault) e.preventDefault();
 if (e.returnValue) e.returnValue = false;
 return false;
 }
 }
 // If all the characters were legal, hide the message if there is one.
 if (messageElement) messageElement.style.visibility = "hidden";
 }
});