OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
(...skipping 23 matching lines...) Expand all Loading... |
34 | 34 |
35 <input is="iron-input" validator="my-custom-validator"> | 35 <input is="iron-input" validator="my-custom-validator"> |
36 | 36 |
37 ### Stopping invalid input | 37 ### Stopping invalid input |
38 | 38 |
39 It may be desirable to only allow users to enter certain characters. You can use
the | 39 It may be desirable to only allow users to enter certain characters. You can use
the |
40 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish
this. This feature | 40 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish
this. This feature |
41 is separate from validation, and `allowed-pattern` does not affect how the input
is validated. | 41 is separate from validation, and `allowed-pattern` does not affect how the input
is validated. |
42 | 42 |
43 <!-- only allow characters that match [0-9] --> | 43 <!-- only allow characters that match [0-9] --> |
44 <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]"> | 44 <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> |
45 | 45 |
46 @hero hero.svg | 46 @hero hero.svg |
47 @demo demo/index.html | 47 @demo demo/index.html |
48 */ | 48 */ |
49 | 49 |
50 Polymer({ | 50 Polymer({ |
51 | 51 |
52 is: 'iron-input', | 52 is: 'iron-input', |
53 | 53 |
54 extends: 'input', | 54 extends: 'input', |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
147 // What a control/printable character is varies wildly based on the browse
r. | 147 // What a control/printable character is varies wildly based on the browse
r. |
148 // - most control characters (arrows, backspace) do not send a `keypress`
event | 148 // - most control characters (arrows, backspace) do not send a `keypress`
event |
149 // in Chrome, but the *do* on Firefox | 149 // in Chrome, but the *do* on Firefox |
150 // - in Firefox, when they do send a `keypress` event, control chars have | 150 // - in Firefox, when they do send a `keypress` event, control chars have |
151 // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) | 151 // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) |
152 // - printable characters always send a keypress event. | 152 // - printable characters always send a keypress event. |
153 // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the
keyCode | 153 // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the
keyCode |
154 // always matches the charCode. | 154 // always matches the charCode. |
155 // None of this makes any sense. | 155 // None of this makes any sense. |
156 | 156 |
157 var nonPrintable = | 157 // For these keys, ASCII code == browser keycode. |
| 158 var anyNonPrintable = |
158 (event.keyCode == 8) || // backspace | 159 (event.keyCode == 8) || // backspace |
| 160 (event.keyCode == 13) || // enter |
| 161 (event.keyCode == 27); // escape |
| 162 |
| 163 // For these keys, make sure it's a browser keycode and not an ASCII code. |
| 164 var mozNonPrintable = |
159 (event.keyCode == 19) || // pause | 165 (event.keyCode == 19) || // pause |
160 (event.keyCode == 20) || // caps lock | 166 (event.keyCode == 20) || // caps lock |
161 (event.keyCode == 27) || // escape | |
162 (event.keyCode == 45) || // insert | 167 (event.keyCode == 45) || // insert |
163 (event.keyCode == 46) || // delete | 168 (event.keyCode == 46) || // delete |
164 (event.keyCode == 144) || // num lock | 169 (event.keyCode == 144) || // num lock |
165 (event.keyCode == 145) || // scroll lock | 170 (event.keyCode == 145) || // scroll lock |
166 (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, ho
me, arrows | 171 (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, ho
me, arrows |
167 (event.keyCode > 111 && event.keyCode < 124); // fn keys | 172 (event.keyCode > 111 && event.keyCode < 124); // fn keys |
168 | 173 |
169 return !(event.charCode == 0 && nonPrintable); | 174 return !anyNonPrintable && !(event.charCode == 0 && mozNonPrintable); |
170 }, | 175 }, |
171 | 176 |
172 _onKeypress: function(event) { | 177 _onKeypress: function(event) { |
173 if (!this.preventInvalidInput && this.type !== 'number') { | 178 if (!this.preventInvalidInput && this.type !== 'number') { |
174 return; | 179 return; |
175 } | 180 } |
176 var regexp = this._patternRegExp; | 181 var regexp = this._patternRegExp; |
177 if (!regexp) { | 182 if (!regexp) { |
178 return; | 183 return; |
179 } | 184 } |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
228 } | 233 } |
229 | 234 |
230 }); | 235 }); |
231 | 236 |
232 /* | 237 /* |
233 The `iron-input-validate` event is fired whenever `validate()` is called. | 238 The `iron-input-validate` event is fired whenever `validate()` is called. |
234 @event iron-input-validate | 239 @event iron-input-validate |
235 */ | 240 */ |
236 | 241 |
237 </script> | 242 </script> |
OLD | NEW |