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"; } });
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 in the value of the allowed attribute. The initial comment at the top of Example includes some sample HTML that uses the module

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.