OLD | NEW |
| (Empty) |
1 | |
2 | |
3 /* | |
4 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` | |
5 to `<input>`. | |
6 | |
7 ### Two-way binding | |
8 | |
9 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: | |
10 | |
11 <input value="{{myValue::input}}"> | |
12 | |
13 `iron-input` adds the `bind-value` property that mirrors the `value` property, a
nd can be used | |
14 for two-way data binding. `bind-value` will notify if it is changed either by us
er input or by script. | |
15 | |
16 <input is="iron-input" bind-value="{{myValue}}"> | |
17 | |
18 ### Custom validators | |
19 | |
20 You can use custom validators that implement `Polymer.IronValidatorBehavior` wit
h `<iron-input>`. | |
21 | |
22 <input is="iron-input" validator="my-custom-validator"> | |
23 | |
24 ### Stopping invalid input | |
25 | |
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 | |
28 is separate from validation, and `allowed-pattern` does not affect how the input
is validated. | |
29 | |
30 <!-- only allow characters that match [0-9] --> | |
31 <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]"> | |
32 | |
33 @hero hero.svg | |
34 @demo demo/index.html | |
35 */ | |
36 | |
37 Polymer({ | |
38 | |
39 is: 'iron-input', | |
40 | |
41 extends: 'input', | |
42 | |
43 behaviors: [ | |
44 Polymer.IronValidatableBehavior | |
45 ], | |
46 | |
47 properties: { | |
48 | |
49 /** | |
50 * Use this property instead of `value` for two-way data binding. | |
51 */ | |
52 bindValue: { | |
53 observer: '_bindValueChanged', | |
54 type: String | |
55 }, | |
56 | |
57 /** | |
58 * Set to true to prevent the user from entering invalid input. The new in
put characters are | |
59 * matched with `allowedPattern` if it is set, otherwise it will use the `
pattern` attribute if | |
60 * set, or the `type` attribute (only supported for `type=number`). | |
61 */ | |
62 preventInvalidInput: { | |
63 type: Boolean | |
64 }, | |
65 | |
66 /** | |
67 * Regular expression to match valid input characters. | |
68 */ | |
69 allowedPattern: { | |
70 type: String | |
71 }, | |
72 | |
73 _previousValidInput: { | |
74 type: String, | |
75 value: '' | |
76 } | |
77 | |
78 }, | |
79 | |
80 listeners: { | |
81 'input': '_onInput', | |
82 'keydown': '_onKeydown' | |
83 }, | |
84 | |
85 get _patternRegExp() { | |
86 var pattern; | |
87 if (this.allowedPattern) { | |
88 pattern = new RegExp(this.allowedPattern); | |
89 } else if (this.pattern) { | |
90 pattern = new RegExp(this.pattern); | |
91 } else { | |
92 switch (this.type) { | |
93 case 'number': | |
94 pattern = /[0-9.,e-]/; | |
95 break; | |
96 } | |
97 } | |
98 return pattern; | |
99 }, | |
100 | |
101 ready: function() { | |
102 this.bindValue = this.value; | |
103 }, | |
104 | |
105 _bindValueChanged: function() { | |
106 if (this.value !== this.bindValue) { | |
107 this.value = this.bindValue; | |
108 } | |
109 // manually notify because we don't want to notify until after setting val
ue | |
110 this.fire('bind-value-changed', {value: this.bindValue}); | |
111 }, | |
112 | |
113 _onInput: function() { | |
114 this.bindValue = this.value; | |
115 }, | |
116 | |
117 _isPrintable: function(keyCode) { | |
118 var printable = | |
119 (keyCode > 47 && keyCode < 58) || // number keys | |
120 keyCode == 32 || keyCode == 13 || // spacebar & return key | |
121 (keyCode > 64 && keyCode < 91) || // letter keys | |
122 (keyCode > 95 && keyCode < 112) || // numpad keys | |
123 (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order) | |
124 (keyCode > 218 && keyCode < 223); // [\]' (in order) | |
125 return printable; | |
126 }, | |
127 | |
128 // convert printable numpad keys to number keys | |
129 _correctNumpadKeys: function(keyCode) { | |
130 return (keyCode > 95 && keyCode < 112) ? keyCode - 48 : keyCode; | |
131 }, | |
132 | |
133 _onKeydown: function(event) { | |
134 if (!this.preventInvalidInput && this.type !== 'number') { | |
135 return; | |
136 } | |
137 var regexp = this._patternRegExp; | |
138 if (!regexp) { | |
139 return; | |
140 } | |
141 var thisChar = String.fromCharCode(this._correctNumpadKeys(event.keyCode))
; | |
142 if (this._isPrintable(event.keyCode) && !regexp.test(thisChar)) { | |
143 event.preventDefault(); | |
144 } | |
145 }, | |
146 | |
147 /** | |
148 * Returns true if `value` is valid. The validator provided in `validator` w
ill be used first, | |
149 * then any constraints. | |
150 * @return {Boolean} True if the value is valid. | |
151 */ | |
152 validate: function() { | |
153 // Empty, non-required input is valid. | |
154 if (!this.required && this.value == '') | |
155 return true; | |
156 | |
157 var valid; | |
158 if (this.hasValidator()) { | |
159 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); | |
160 } else { | |
161 this.invalid = !this.validity.valid; | |
162 valid = this.validity.valid; | |
163 } | |
164 this.fire('iron-input-validate'); | |
165 return valid; | |
166 } | |
167 | |
168 }); | |
169 | |
170 /* | |
171 The `iron-input-validate` event is fired whenever `validate()` is called. | |
172 @event iron-input-validate | |
173 */ | |
174 | |
OLD | NEW |