Help?
Expand|Select|Wrap|Line Numbers
- /**
- * 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";
- }
- });