OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS | |
6 Code distributed by Google as part of the polymer project is also | |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS | |
8 --> | |
9 | |
10 <!-- | |
11 /** | |
12 * core-input is an unstyled single- or multi-line text field where user can | |
13 * enter input. | |
14 * | |
15 * Example: | |
16 * | |
17 * <core-input placeholder="Placeholder text here"></core-input> | |
18 * | |
19 * <core-input multiline placeholder="Enter multiple lines here"></core-inpu
t> | |
20 * | |
21 * The text input's value is considered "committed" if the user hits the "enter" | |
22 * key or blurs the input after changing the value. The `change` event is fired | |
23 * when the value becomes committed, and the committed value is stored in the | |
24 * `value` property. The current value of the input is stored in the `inputValue
` | |
25 * property. | |
26 * | |
27 * Validation | |
28 * ---------- | |
29 * | |
30 * core-input can optionally validate the value using the HTML5 constraints API, | |
31 * similar to native inputs. There are two methods to enable input validation: | |
32 * | |
33 * 1. By setting the `type` attribute. For example, setting it to `email` will | |
34 * check the value is a valid email, and setting it to `number` will check | |
35 * the input is a number. | |
36 * | |
37 * 2. By setting attributes related to validation. The attributes are `pattern`, | |
38 * `min`, `max`, `step` and `required`. | |
39 * | |
40 * Only `required` is supported for multiline inputs currently. | |
41 * | |
42 * Example: | |
43 * | |
44 * <core-input type="email" placeholder="enter your email"></core-input> | |
45 * | |
46 * <core-input type="number" min="5" placeholder="enter a number greater tha
n or equal to 5"></core-input> | |
47 * | |
48 * <core-input pattern=".*abc.*" placeholder="enter something containing 'ab
c'"></core-input> | |
49 * | |
50 * See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_
validation | |
51 * for more info on validation. | |
52 * | |
53 * @group Polymer Core Elements | |
54 * @element core-input | |
55 * @homepage github.io | |
56 */ | |
57 --> | |
58 | |
59 <!-- | |
60 Fired when the inputValue of is changed. This is the same event as the DOM | |
61 "input" event. | |
62 | |
63 @event input | |
64 --> | |
65 | |
66 <!-- | |
67 Fired when the user commits the value of the input, either by the hitting the | |
68 `enter` key or blurring the input after the changing the inputValue. Also see th
e | |
69 DOM "change" event. | |
70 | |
71 @event change | |
72 --> | |
73 | |
74 <!-- | |
75 Fired when the inputValue of this text input changes and fails validation. | |
76 | |
77 @event input-invalid | |
78 @param {Object} detail | |
79 @param {string} value The text input's inputValue. | |
80 --> | |
81 | |
82 <!-- | |
83 Fired when the inputValue of this text input changes and passes validation. | |
84 | |
85 @event input-valid | |
86 @param {Object} detail | |
87 @param {string} value The text input's inputValue. | |
88 --> | |
89 <link href="../polymer/polymer.html" rel="import"> | |
90 | |
91 <polymer-element name="core-input" on-focus="{{focusAction}}"> | |
92 | |
93 <template> | |
94 | |
95 <link href="core-input.css" rel="stylesheet"> | |
96 | |
97 <template if="{{multiline}}"> | |
98 <textarea id="input" value="{{inputValue}}" rows="{{rows}}" fit?="{{rows =
== 'fit'}}" disabled?="{{disabled}}" placeholder="{{placeholder}}" autofocus?="{
{autofocus}}" required?="{{required}}" readonly?="{{readonly}}" aria-label="{{la
bel || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction}
}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"></textarea> | |
99 </template> | |
100 | |
101 <template if="{{!multiline}}"> | |
102 <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{
type}}" placeholder="{{placeholder}}" autofocus?="{{autofocus}}" required?="{{re
quired}}" readonly?="{{readonly}}" pattern="{{pattern}}" min="{{min}}" max="{{ma
x}}" step="{{step}}" maxlength="{{maxlength}}" aria-label="{{label || placeholde
r}}" aria-invalid="{{invalid}}" on-keydown="{{keydownAction}}" on-change="{{inpu
tChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"> | |
103 </template> | |
104 | |
105 </template> | |
106 | |
107 <script> | |
108 | |
109 Polymer('core-input', { | |
110 publish: { | |
111 /** | |
112 * Placeholder text that hints to the user what can be entered in | |
113 * the input. | |
114 * | |
115 * @attribute placeholder | |
116 * @type string | |
117 * @default '' | |
118 */ | |
119 placeholder: '', | |
120 | |
121 /** | |
122 * If true, this input cannot be focused and the user cannot change | |
123 * its value. | |
124 * | |
125 * @attribute disabled | |
126 * @type boolean | |
127 * @default false | |
128 */ | |
129 disabled: false, | |
130 | |
131 /** | |
132 * If true, the user cannot modify the value of the input. | |
133 * | |
134 * @attribute readonly | |
135 * @type boolean | |
136 * @default false | |
137 */ | |
138 readonly: false, | |
139 | |
140 /** | |
141 * If true, this input will automatically gain focus on page load. | |
142 * | |
143 * @attribute autofocus | |
144 * @type boolean | |
145 * @default false | |
146 */ | |
147 autofocus: false, | |
148 | |
149 /** | |
150 * If true, this input accepts multi-line input like a `<textarea>` | |
151 * | |
152 * @attribute multiline | |
153 * @type boolean | |
154 * @default false | |
155 */ | |
156 multiline: false, | |
157 | |
158 /** | |
159 * (multiline only) The height of this text input in rows. The input | |
160 * will scroll internally if more input is entered beyond the size | |
161 * of the component. This property is meaningless if multiline is | |
162 * false. You can also set this property to "fit" and size the | |
163 * component with CSS to make the input fit the CSS size. | |
164 * | |
165 * @attribute rows | |
166 * @type number|'fit' | |
167 * @default 'fit' | |
168 */ | |
169 rows: 'fit', | |
170 | |
171 /** | |
172 * The current value of this input. Changing inputValue programmatically | |
173 * will cause value to be out of sync. Instead, change value directly | |
174 * or call commit() after changing inputValue. | |
175 * | |
176 * @attribute inputValue | |
177 * @type string | |
178 * @default '' | |
179 */ | |
180 inputValue: '', | |
181 | |
182 /** | |
183 * The value of the input committed by the user, either by changing the | |
184 * inputValue and blurring the input, or by hitting the `enter` key. | |
185 * | |
186 * @attribute value | |
187 * @type string | |
188 * @default '' | |
189 */ | |
190 value: '', | |
191 | |
192 /** | |
193 * Set the input type. Not supported for `multiline`. | |
194 * | |
195 * @attribute type | |
196 * @type string | |
197 * @default text | |
198 */ | |
199 type: 'text', | |
200 | |
201 /** | |
202 * If true, the input is invalid if its value is null. | |
203 * | |
204 * @attribute required | |
205 * @type boolean | |
206 * @default false | |
207 */ | |
208 required: false, | |
209 | |
210 /** | |
211 * A regular expression to validate the input value against. See | |
212 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra
int_validation#Validation-related_attributes | |
213 * for more info. Not supported if `multiline` is true. | |
214 * | |
215 * @attribute pattern | |
216 * @type string | |
217 * @default '.*' | |
218 */ | |
219 // FIXME(yvonne): The default is set to .* because we can't bind to patt
ern such | |
220 // that the attribute is unset if pattern is null. | |
221 pattern: '.*', | |
222 | |
223 /** | |
224 * If set, the input is invalid if the value is less than this property.
See | |
225 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra
int_validation#Validation-related_attributes | |
226 * for more info. Not supported if `multiline` is true. | |
227 * | |
228 * @attribute min | |
229 */ | |
230 min: null, | |
231 | |
232 /** | |
233 * If set, the input is invalid if the value is greater than this proper
ty. See | |
234 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra
int_validation#Validation-related_attributes | |
235 * for more info. Not supported if `multiline` is true. | |
236 * | |
237 * @attribute max | |
238 */ | |
239 max: null, | |
240 | |
241 /** | |
242 * If set, the input is invalid if the value is not `min` plus an integr
al multiple | |
243 * of this property. See | |
244 * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constra
int_validation#Validation-related_attributes | |
245 * for more info. Not supported if `multiline` is true. | |
246 * | |
247 * @attribute step | |
248 */ | |
249 step: null, | |
250 | |
251 /** | |
252 * The maximum length of the input value. | |
253 * | |
254 * @attribute maxlength | |
255 * @type number | |
256 */ | |
257 maxlength: null, | |
258 | |
259 /** | |
260 * If this property is true, the text input's inputValue failed validati
on. | |
261 * | |
262 * @attribute invalid | |
263 * @type boolean | |
264 * @default false | |
265 */ | |
266 invalid: false | |
267 }, | |
268 | |
269 ready: function() { | |
270 this.handleTabindex(this.getAttribute('tabindex')); | |
271 }, | |
272 | |
273 invalidChanged: function() { | |
274 this.classList.toggle('invalid', this.invalid); | |
275 this.fire('input-'+ (this.invalid ? 'invalid' : 'valid'), {value: this.i
nputValue}); | |
276 }, | |
277 | |
278 inputValueChanged: function() { | |
279 this.updateValidity_(); | |
280 }, | |
281 | |
282 valueChanged: function() { | |
283 this.inputValue = this.value; | |
284 }, | |
285 | |
286 requiredChanged: function() { | |
287 this.updateValidity_(); | |
288 }, | |
289 | |
290 attributeChanged: function(attr, oldVal, curVal) { | |
291 if (attr === 'tabindex') { | |
292 this.handleTabindex(curVal); | |
293 } | |
294 }, | |
295 | |
296 handleTabindex: function(tabindex) { | |
297 if (tabindex > 0) { | |
298 this.$.input.setAttribute('tabindex', -1); | |
299 } else { | |
300 this.$.input.removeAttribute('tabindex'); | |
301 } | |
302 }, | |
303 | |
304 /** | |
305 * Commits the inputValue to value. | |
306 * | |
307 * @method commit | |
308 */ | |
309 commit: function() { | |
310 this.value = this.inputValue; | |
311 }, | |
312 | |
313 updateValidity_: function() { | |
314 if (this.$.input.willValidate) { | |
315 this.invalid = !this.$.input.validity.valid; | |
316 } | |
317 }, | |
318 | |
319 keydownAction: function() { | |
320 // for type = number, the value is the empty string unless the input is
a valid number. | |
321 // FIXME(yvonne): check other types | |
322 if (this.type === 'number') { | |
323 this.async(function() { | |
324 this.updateValidity_(); | |
325 }); | |
326 } | |
327 }, | |
328 | |
329 inputChangeAction: function() { | |
330 this.commit(); | |
331 if (!window.ShadowDOMPolyfill) { | |
332 // re-fire event that does not bubble across shadow roots | |
333 this.fire('change', null, this); | |
334 } | |
335 }, | |
336 | |
337 focusAction: function(e) { | |
338 if (this.getAttribute('tabindex') > 0) { | |
339 // Forward focus to the inner input if tabindex is set on the element | |
340 // This will not cause an infinite loop because focus will not fire on
the <input> | |
341 // again if it's already focused. | |
342 this.$.input.focus(); | |
343 } | |
344 }, | |
345 | |
346 inputFocusAction: function(e) { | |
347 if (window.ShadowDOMPolyfill) { | |
348 // re-fire non-bubbling event if polyfill | |
349 this.fire('focus', null, this, false); | |
350 } | |
351 }, | |
352 | |
353 inputBlurAction: function() { | |
354 if (window.ShadowDOMPolyfill) { | |
355 // re-fire non-bubbling event | |
356 this.fire('blur', null, this, false); | |
357 } | |
358 }, | |
359 | |
360 blur: function() { | |
361 // forward blur method to the internal input / textarea element | |
362 this.$.input.blur(); | |
363 }, | |
364 | |
365 click: function() { | |
366 // forward click method to the internal input / textarea element | |
367 this.$.input.click(); | |
368 }, | |
369 | |
370 focus: function() { | |
371 // forward focus method to the internal input / textarea element | |
372 this.$.input.focus(); | |
373 }, | |
374 | |
375 select: function() { | |
376 // forward select method to the internal input / textarea element | |
377 this.$.input.focus(); | |
378 }, | |
379 | |
380 setSelectionRange: function(selectionStart, selectionEnd, selectionDirecti
on) { | |
381 // forward setSelectionRange method to the internal input / textarea ele
ment | |
382 this.$.input.setSelectionRange(selectionStart, selectionEnd, selectionDi
rection); | |
383 }, | |
384 | |
385 setRangeText: function(replacement, start, end, selectMode) { | |
386 // forward setRangeText method to the internal input element | |
387 if (!this.multiline) { | |
388 this.$.input.setRangeText(replacement, start, end, selectMode); | |
389 } | |
390 }, | |
391 | |
392 stepDown: function(n) { | |
393 // forward stepDown method to the internal input element | |
394 if (!this.multiline) { | |
395 this.$.input.stepDown(n); | |
396 } | |
397 }, | |
398 | |
399 stepUp: function(n) { | |
400 // forward stepUp method to the internal input element | |
401 if (!this.multiline) { | |
402 this.$.input.stepUp(n); | |
403 } | |
404 }, | |
405 | |
406 get willValidate() { | |
407 return this.$.input.willValidate; | |
408 }, | |
409 | |
410 get validity() { | |
411 return this.$.input.validity; | |
412 }, | |
413 | |
414 get validationMessage() { | |
415 return this.$.input.validationMessage; | |
416 }, | |
417 | |
418 checkValidity: function() { | |
419 var r = this.$.input.checkValidity(); | |
420 this.updateValidity_(); | |
421 return r; | |
422 }, | |
423 | |
424 setCustomValidity: function(message) { | |
425 this.$.input.setCustomValidity(message); | |
426 this.updateValidity_(); | |
427 } | |
428 | |
429 }); | |
430 </script> | |
431 | |
432 </polymer-element> | |
OLD | NEW |