|
1 /* |
|
2 * Copyright (C) 2006 Baron Schwartz <baron at xaprb dot com> |
|
3 * |
|
4 * This program is free software; you can redistribute it and/or modify it |
|
5 * under the terms of the GNU Lesser General Public License as published by the |
|
6 * Free Software Foundation, version 2.1. |
|
7 * |
|
8 * This program is distributed in the hope that it will be useful, but WITHOUT |
|
9 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS |
|
10 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more |
|
11 * details. |
|
12 * |
|
13 * $Id: html-form-input-mask.js,v 1.6 2006-11-03 04:04:29 baron Exp $ |
|
14 */ |
|
15 |
|
16 /* Set up a global Xaprb object to act as the Xaprb namespace, without colliding |
|
17 * with other Xaprb scripts. |
|
18 */ |
|
19 if ( typeof(Xaprb) === 'undefined' ) { |
|
20 Xaprb = new Object(); |
|
21 } |
|
22 |
|
23 /* The Xaprb.InputMask object acts as the namespace for input masking |
|
24 * functionality. |
|
25 */ |
|
26 Xaprb.InputMask = { |
|
27 |
|
28 /* Each mask has a format and regex property. The format consists |
|
29 * of spaces and non-spaces. A space is a placeholder for a value the user |
|
30 * enters. A non-space is a literal character that gets copied to that |
|
31 * position in the value. The regex is used to validate each character, one |
|
32 * at a time (it is not applied against the entire value in the form field, |
|
33 * just the characters the user enters). |
|
34 * |
|
35 * The way you name your masks is significant. If you create a mask called |
|
36 * date_us, you cause it to be applied to a form field by a) adding the |
|
37 * input_mask class to that form field, which triggers this script to treat |
|
38 * it specially, and b) adding the class mask_date_us to the form field, |
|
39 * which causes this script to apply the date_us mask to it. |
|
40 */ |
|
41 masks: { |
|
42 date_iso: { |
|
43 format: ' - - ', |
|
44 regex: /\d/ |
|
45 }, |
|
46 date_us: { |
|
47 format: ' / / ', |
|
48 regex: /\d/ |
|
49 }, |
|
50 time: { |
|
51 format: ' : : ', |
|
52 regex: /\d/ |
|
53 }, |
|
54 phone: { |
|
55 format: '( ) - ', |
|
56 regex: /\d/ |
|
57 }, |
|
58 ssn: { |
|
59 format: ' - - ', |
|
60 regex: /\d/ |
|
61 }, |
|
62 visa: { |
|
63 format: ' - - - ', |
|
64 regex: /\d/ |
|
65 } |
|
66 }, |
|
67 |
|
68 /* Finds every element with class input_mask and applies masks to them. |
|
69 */ |
|
70 setupElementMasks: function() { |
|
71 if ( document.getElementsByClassName ) { // Requires the Prototype library |
|
72 document.getElementsByClassName('input_mask').each(function(item) { |
|
73 Event.observe(item, 'keypress', |
|
74 Xaprb.InputMask.applyMask.bindAsEventListener(item), true); |
|
75 }); |
|
76 } |
|
77 }, |
|
78 |
|
79 |
|
80 /* This is triggered when the key is pressed in the form input. It is |
|
81 * bound to the element, so 'this' is the input element. |
|
82 */ |
|
83 applyMask: function(event) { |
|
84 var match = /mask_(\w+)/.exec(this.className); |
|
85 if ( match.length == 2 && Xaprb.InputMask.masks[match[1]] ) { |
|
86 var mask = Xaprb.InputMask.masks[match[1]]; |
|
87 var key = Xaprb.InputMask.getKey(event); |
|
88 |
|
89 if ( Xaprb.InputMask.isPrintable(key) ) { |
|
90 var ch = String.fromCharCode(key); |
|
91 var str = this.value + ch; |
|
92 var pos = str.length; |
|
93 if ( mask.regex.test(ch) && pos <= mask.format.length ) { |
|
94 if ( mask.format.charAt(pos - 1) != ' ' ) { |
|
95 str = this.value + mask.format.charAt(pos - 1) + ch; |
|
96 } |
|
97 this.value = str; |
|
98 } |
|
99 Event.stop(event); |
|
100 } |
|
101 } |
|
102 }, |
|
103 |
|
104 /* Returns true if the key is a printable character. |
|
105 */ |
|
106 isPrintable: function(key) { |
|
107 return ( key >= 32 && key < 127 ); |
|
108 }, |
|
109 |
|
110 /* Returns the key code associated with the event. |
|
111 */ |
|
112 getKey: function(e) { |
|
113 return window.event ? window.event.keyCode |
|
114 : e ? e.which |
|
115 : 0; |
|
116 } |
|
117 }; |