OLD | NEW |
1 | |
2 | |
3 /* | 1 /* |
4 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` | 2 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` |
5 to `<input>`. | 3 to `<input>`. |
6 | 4 |
7 ### Two-way binding | 5 ### Two-way binding |
8 | 6 |
9 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: | 7 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: |
10 | 8 |
11 <input value="{{myValue::input}}"> | 9 <input value="{{myValue::input}}"> |
12 | 10 |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
102 } | 100 } |
103 return pattern; | 101 return pattern; |
104 }, | 102 }, |
105 | 103 |
106 ready: function() { | 104 ready: function() { |
107 this.bindValue = this.value; | 105 this.bindValue = this.value; |
108 }, | 106 }, |
109 | 107 |
110 _bindValueChanged: function() { | 108 _bindValueChanged: function() { |
111 if (this.value !== this.bindValue) { | 109 if (this.value !== this.bindValue) { |
112 this.value = !this.bindValue ? '' : this.bindValue; | 110 this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindV
alue; |
113 } | 111 } |
114 // manually notify because we don't want to notify until after setting val
ue | 112 // manually notify because we don't want to notify until after setting val
ue |
115 this.fire('bind-value-changed', {value: this.bindValue}); | 113 this.fire('bind-value-changed', {value: this.bindValue}); |
116 }, | 114 }, |
117 | 115 |
118 _onInput: function() { | 116 _onInput: function() { |
119 // Need to validate each of the characters pasted if they haven't | 117 // Need to validate each of the characters pasted if they haven't |
120 // been validated inside `_onKeypress` already. | 118 // been validated inside `_onKeypress` already. |
121 if (this.preventInvalidInput && !this._patternAlreadyChecked) { | 119 if (this.preventInvalidInput && !this._patternAlreadyChecked) { |
122 var valid = this._checkPatternValidity(); | 120 var valid = this._checkPatternValidity(); |
(...skipping 14 matching lines...) Expand all Loading... |
137 // - in Firefox, when they do send a `keypress` event, control chars have | 135 // - in Firefox, when they do send a `keypress` event, control chars have |
138 // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) | 136 // a charCode = 0, keyCode = xx (for ex. 40 for down arrow) |
139 // - printable characters always send a keypress event. | 137 // - printable characters always send a keypress event. |
140 // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the
keyCode | 138 // - in Firefox, printable chars always have a keyCode = 0. In Chrome, the
keyCode |
141 // always matches the charCode. | 139 // always matches the charCode. |
142 // None of this makes any sense. | 140 // None of this makes any sense. |
143 | 141 |
144 // For these keys, ASCII code == browser keycode. | 142 // For these keys, ASCII code == browser keycode. |
145 var anyNonPrintable = | 143 var anyNonPrintable = |
146 (event.keyCode == 8) || // backspace | 144 (event.keyCode == 8) || // backspace |
| 145 (event.keyCode == 9) || // tab |
147 (event.keyCode == 13) || // enter | 146 (event.keyCode == 13) || // enter |
148 (event.keyCode == 27); // escape | 147 (event.keyCode == 27); // escape |
149 | 148 |
150 // For these keys, make sure it's a browser keycode and not an ASCII code. | 149 // For these keys, make sure it's a browser keycode and not an ASCII code. |
151 var mozNonPrintable = | 150 var mozNonPrintable = |
152 (event.keyCode == 19) || // pause | 151 (event.keyCode == 19) || // pause |
153 (event.keyCode == 20) || // caps lock | 152 (event.keyCode == 20) || // caps lock |
154 (event.keyCode == 45) || // insert | 153 (event.keyCode == 45) || // insert |
155 (event.keyCode == 46) || // delete | 154 (event.keyCode == 46) || // delete |
156 (event.keyCode == 144) || // num lock | 155 (event.keyCode == 144) || // num lock |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
217 } | 216 } |
218 this.fire('iron-input-validate'); | 217 this.fire('iron-input-validate'); |
219 return valid; | 218 return valid; |
220 } | 219 } |
221 | 220 |
222 }); | 221 }); |
223 | 222 |
224 /* | 223 /* |
225 The `iron-input-validate` event is fired whenever `validate()` is called. | 224 The `iron-input-validate` event is fired whenever `validate()` is called. |
226 @event iron-input-validate | 225 @event iron-input-validate |
227 */ | 226 */ |
228 | |
OLD | NEW |