diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.js Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,117 @@ +/* + * Copyright (C) 2006 Baron Schwartz + * + * This program is free software; you can redistribute it and/or modify it + * under the terms of the GNU Lesser General Public License as published by the + * Free Software Foundation, version 2.1. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS + * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more + * details. + * + * $Id: html-form-input-mask.js,v 1.6 2006-11-03 04:04:29 baron Exp $ + */ + +/* Set up a global Xaprb object to act as the Xaprb namespace, without colliding + * with other Xaprb scripts. + */ +if ( typeof(Xaprb) === 'undefined' ) { + Xaprb = new Object(); +} + +/* The Xaprb.InputMask object acts as the namespace for input masking + * functionality. + */ +Xaprb.InputMask = { + + /* Each mask has a format and regex property. The format consists + * of spaces and non-spaces. A space is a placeholder for a value the user + * enters. A non-space is a literal character that gets copied to that + * position in the value. The regex is used to validate each character, one + * at a time (it is not applied against the entire value in the form field, + * just the characters the user enters). + * + * The way you name your masks is significant. If you create a mask called + * date_us, you cause it to be applied to a form field by a) adding the + * input_mask class to that form field, which triggers this script to treat + * it specially, and b) adding the class mask_date_us to the form field, + * which causes this script to apply the date_us mask to it. + */ + masks: { + date_iso: { + format: ' - - ', + regex: /\d/ + }, + date_us: { + format: ' / / ', + regex: /\d/ + }, + time: { + format: ' : : ', + regex: /\d/ + }, + phone: { + format: '( ) - ', + regex: /\d/ + }, + ssn: { + format: ' - - ', + regex: /\d/ + }, + visa: { + format: ' - - - ', + regex: /\d/ + } + }, + + /* Finds every element with class input_mask and applies masks to them. + */ + setupElementMasks: function() { + if ( document.getElementsByClassName ) { // Requires the Prototype library + document.getElementsByClassName('input_mask').each(function(item) { + Event.observe(item, 'keypress', + Xaprb.InputMask.applyMask.bindAsEventListener(item), true); + }); + } + }, + + + /* This is triggered when the key is pressed in the form input. It is + * bound to the element, so 'this' is the input element. + */ + applyMask: function(event) { + var match = /mask_(\w+)/.exec(this.className); + if ( match.length == 2 && Xaprb.InputMask.masks[match[1]] ) { + var mask = Xaprb.InputMask.masks[match[1]]; + var key = Xaprb.InputMask.getKey(event); + + if ( Xaprb.InputMask.isPrintable(key) ) { + var ch = String.fromCharCode(key); + var str = this.value + ch; + var pos = str.length; + if ( mask.regex.test(ch) && pos <= mask.format.length ) { + if ( mask.format.charAt(pos - 1) != ' ' ) { + str = this.value + mask.format.charAt(pos - 1) + ch; + } + this.value = str; + } + Event.stop(event); + } + } + }, + + /* Returns true if the key is a printable character. + */ + isPrintable: function(key) { + return ( key >= 32 && key < 127 ); + }, + + /* Returns the key code associated with the event. + */ + getKey: function(e) { + return window.event ? window.event.keyCode + : e ? e.which + : 0; + } +};