OLD | NEW |
1 | 1 |
2 | 2 |
3 /* | 3 /* |
4 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` | 4 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` |
5 to `<input>`. | 5 to `<input>`. |
6 | 6 |
7 ### Two-way binding | 7 ### Two-way binding |
8 | 8 |
9 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: | 9 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: |
10 | 10 |
(...skipping 10 matching lines...) Expand all Loading... |
21 | 21 |
22 <input is="iron-input" validator="my-custom-validator"> | 22 <input is="iron-input" validator="my-custom-validator"> |
23 | 23 |
24 ### Stopping invalid input | 24 ### Stopping invalid input |
25 | 25 |
26 It may be desirable to only allow users to enter certain characters. You can use
the | 26 It may be desirable to only allow users to enter certain characters. You can use
the |
27 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish
this. This feature | 27 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish
this. This feature |
28 is separate from validation, and `allowed-pattern` does not affect how the input
is validated. | 28 is separate from validation, and `allowed-pattern` does not affect how the input
is validated. |
29 | 29 |
30 <!-- only allow characters that match [0-9] --> | 30 <!-- only allow characters that match [0-9] --> |
31 <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]"> | 31 <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> |
32 | 32 |
33 @hero hero.svg | 33 @hero hero.svg |
34 @demo demo/index.html | 34 @demo demo/index.html |
35 */ | 35 */ |
36 | 36 |
37 Polymer({ | 37 Polymer({ |
38 | 38 |
39 is: 'iron-input', | 39 is: 'iron-input', |
40 | 40 |
41 extends: 'input', | 41 extends: 'input', |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
134 // What a control/printable character is varies wildly based on the browse
r. | 134 // What a control/printable character is varies wildly based on the browse
r. |
135 // - most control characters (arrows, backspace) do not send a `keypress`
event | 135 // - most control characters (arrows, backspace) do not send a `keypress`
event |
136 // in Chrome, but the *do* on Firefox | 136 // in Chrome, but the *do* on Firefox |
137 // - in Firefox, when they do send a `keypress` event, control chars have | 137 // - in Firefox, when they do send a `keypress` event, control chars have |
138 // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) | 138 // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) |
139 // - printable characters always send a keypress event. | 139 // - printable characters always send a keypress event. |
140 // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the
keyCode | 140 // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the
keyCode |
141 // always matches the charCode. | 141 // always matches the charCode. |
142 // None of this makes any sense. | 142 // None of this makes any sense. |
143 | 143 |
144 var nonPrintable = | 144 // For these keys, ASCII code == browser keycode. |
| 145 var anyNonPrintable = |
145 (event.keyCode == 8) || // backspace | 146 (event.keyCode == 8) || // backspace |
| 147 (event.keyCode == 13) || // enter |
| 148 (event.keyCode == 27); // escape |
| 149 |
| 150 // For these keys, make sure it's a browser keycode and not an ASCII code. |
| 151 var mozNonPrintable = |
146 (event.keyCode == 19) || // pause | 152 (event.keyCode == 19) || // pause |
147 (event.keyCode == 20) || // caps lock | 153 (event.keyCode == 20) || // caps lock |
148 (event.keyCode == 27) || // escape | |
149 (event.keyCode == 45) || // insert | 154 (event.keyCode == 45) || // insert |
150 (event.keyCode == 46) || // delete | 155 (event.keyCode == 46) || // delete |
151 (event.keyCode == 144) || // num lock | 156 (event.keyCode == 144) || // num lock |
152 (event.keyCode == 145) || // scroll lock | 157 (event.keyCode == 145) || // scroll lock |
153 (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, ho
me, arrows | 158 (event.keyCode > 32 && event.keyCode < 41) || // page up/down, end, ho
me, arrows |
154 (event.keyCode > 111 && event.keyCode < 124); // fn keys | 159 (event.keyCode > 111 && event.keyCode < 124); // fn keys |
155 | 160 |
156 return !(event.charCode == 0 && nonPrintable); | 161 return !anyNonPrintable && !(event.charCode == 0 && mozNonPrintable); |
157 }, | 162 }, |
158 | 163 |
159 _onKeypress: function(event) { | 164 _onKeypress: function(event) { |
160 if (!this.preventInvalidInput && this.type !== 'number') { | 165 if (!this.preventInvalidInput && this.type !== 'number') { |
161 return; | 166 return; |
162 } | 167 } |
163 var regexp = this._patternRegExp; | 168 var regexp = this._patternRegExp; |
164 if (!regexp) { | 169 if (!regexp) { |
165 return; | 170 return; |
166 } | 171 } |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
214 return valid; | 219 return valid; |
215 } | 220 } |
216 | 221 |
217 }); | 222 }); |
218 | 223 |
219 /* | 224 /* |
220 The `iron-input-validate` event is fired whenever `validate()` is called. | 225 The `iron-input-validate` event is fired whenever `validate()` is called. |
221 @event iron-input-validate | 226 @event iron-input-validate |
222 */ | 227 */ |
223 | 228 |
OLD | NEW |