| 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 |