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"; } });