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-line input field. It extends the native | |
13 `input` element. | |
14 | |
15 Example: | |
16 | |
17 <input is="core-input"> | |
18 | |
19 The input's value is considered "committed" if the user hits the "enter" key | |
20 or blurs the input after changing the value. The committed value is stored in | |
21 the `committedValue` property. | |
22 | |
23 If the input has `type = number`, this element will also prevent non-numeric cha
racters | |
24 from being typed into the text field. | |
25 | |
26 Accessibility | |
27 ------------- | |
28 | |
29 The following ARIA attributes are set automatically: | |
30 | |
31 - `aria-label`: set to the `placeholder` attribute | |
32 - `aria-disabled`: set if `disabled` is true | |
33 | |
34 @group Polymer Core Elements | |
35 @element core-input | |
36 @extends input | |
37 @homepage github.io | |
38 --> | |
39 <link href="../polymer/polymer.html" rel="import"> | |
40 | |
41 <style shim-shadowdom> | |
42 /* FIXME consider theming */ | |
43 | |
44 html /deep/ input[is=core-input] { | |
45 width: 20em; | |
46 font: inherit; | |
47 margin: 0; | |
48 padding: 0; | |
49 background-color: transparent; | |
50 border: 0; | |
51 outline: none; | |
52 } | |
53 </style> | |
54 | |
55 <polymer-element name="core-input" extends="input"> | |
56 | |
57 <script> | |
58 | |
59 Polymer('core-input', { | |
60 | |
61 publish: { | |
62 | |
63 /** | |
64 * The "committed" value of the input, ie. the input value when the user | |
65 * hits the "enter" key or blurs the input after changing the value. You | |
66 * can bind to this value instead of listening for the "change" event. | |
67 * Setting this property has no effect on the input value. | |
68 * | |
69 * @attribute committedValue | |
70 * @type string | |
71 * @default '' | |
72 */ | |
73 committedValue: '', | |
74 | |
75 /** | |
76 * Set to true to prevent invalid input from being entered. | |
77 * | |
78 * @attribute preventInvalidInput | |
79 * @type boolean | |
80 * @default false | |
81 */ | |
82 preventInvalidInput: false | |
83 | |
84 }, | |
85 | |
86 previousValidInput: '', | |
87 | |
88 eventDelegates: { | |
89 input: 'inputAction', | |
90 change: 'changeAction' | |
91 }, | |
92 | |
93 ready: function() { | |
94 /* set ARIA attributes */ | |
95 this.disabledHandler(); | |
96 this.placeholderHandler(); | |
97 }, | |
98 | |
99 attributeChanged: function(attr, old) { | |
100 if (this[attr + 'Handler']) { | |
101 this[attr + 'Handler'](old); | |
102 } | |
103 }, | |
104 | |
105 disabledHandler: function() { | |
106 if (this.disabled) { | |
107 this.setAttribute('aria-disabled', ''); | |
108 } else { | |
109 this.removeAttribute('aria-disabled'); | |
110 } | |
111 }, | |
112 | |
113 placeholderHandler: function() { | |
114 if (this.placeholder) { | |
115 this.setAttribute('aria-label', this.placeholder); | |
116 } else { | |
117 this.removeAttribute('aria-label'); | |
118 } | |
119 }, | |
120 | |
121 /** | |
122 * Commits the `value` to `committedValue` | |
123 * | |
124 * @method commit | |
125 */ | |
126 commit: function() { | |
127 this.committedValue = this.value; | |
128 }, | |
129 | |
130 changeAction: function() { | |
131 this.commit(); | |
132 }, | |
133 | |
134 inputAction: function(e) { | |
135 if (this.preventInvalidInput) { | |
136 if (!e.target.validity.valid) { | |
137 e.target.value = this.previousValidInput; | |
138 } else { | |
139 this.previousValidInput = e.target.value; | |
140 } | |
141 } | |
142 } | |
143 | |
144 }); | |
145 | |
146 </script> | |
147 | |
148 </polymer-element> | |
OLD | NEW |