Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(70)

Side by Side Diff: third_party/polymer/v1_0/components/iron-input/iron-input.html

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior. html">
13
14 <script>
15
16 /*
17 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal idatorBehavior`
18 to `<input>`.
19
20 ### Two-way binding
21
22 By default you can only get notified of changes to an `input`'s `value` due to u ser input:
23
24 <input value="{{myValue::input}}">
25
26 `iron-input` adds the `bind-value` property that mirrors the `value` property, a nd can be used
27 for two-way data binding. `bind-value` will notify if it is changed either by us er input or by script.
28
29 <input is="iron-input" bind-value="{{myValue}}">
30
31 ### Custom validators
32
33 You can use custom validators that implement `Polymer.IronValidatorBehavior` wit h `<iron-input>`.
34
35 <input is="iron-input" validator="my-custom-validator">
36
37 ### Stopping invalid input
38
39 It may be desirable to only allow users to enter certain characters. You can use the
40 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
41 is separate from validation, and `allowed-pattern` does not affect how the input is validated.
42
43 <!-- only allow characters that match [0-9] -->
44 <input is="iron-input" prevent-invaild-input allowed-pattern="[0-9]">
45
46 @hero hero.svg
47 @demo demo/index.html
48 */
49
50 Polymer({
51
52 is: 'iron-input',
53
54 extends: 'input',
55
56 behaviors: [
57 Polymer.IronValidatableBehavior
58 ],
59
60 properties: {
61
62 /**
63 * Use this property instead of `value` for two-way data binding.
64 */
65 bindValue: {
66 observer: '_bindValueChanged',
67 type: String
68 },
69
70 /**
71 * Set to true to prevent the user from entering invalid input. The new in put characters are
72 * matched with `allowedPattern` if it is set, otherwise it will use the ` pattern` attribute if
73 * set, or the `type` attribute (only supported for `type=number`).
74 */
75 preventInvalidInput: {
76 type: Boolean
77 },
78
79 /**
80 * Regular expression to match valid input characters.
81 */
82 allowedPattern: {
83 type: String
84 },
85
86 _previousValidInput: {
87 type: String,
88 value: ''
89 }
90
91 },
92
93 listeners: {
94 'input': '_onInput',
95 'keydown': '_onKeydown'
96 },
97
98 get _patternRegExp() {
99 var pattern;
100 if (this.allowedPattern) {
101 pattern = new RegExp(this.allowedPattern);
102 } else if (this.pattern) {
103 pattern = new RegExp(this.pattern);
104 } else {
105 switch (this.type) {
106 case 'number':
107 pattern = /[0-9.,e-]/;
108 break;
109 }
110 }
111 return pattern;
112 },
113
114 ready: function() {
115 this.bindValue = this.value;
116 },
117
118 _bindValueChanged: function() {
119 if (this.value !== this.bindValue) {
120 this.value = this.bindValue;
121 }
122 // manually notify because we don't want to notify until after setting val ue
123 this.fire('bind-value-changed', {value: this.bindValue});
124 },
125
126 _onInput: function() {
127 this.bindValue = this.value;
128 },
129
130 _isPrintable: function(keyCode) {
131 var printable =
132 (keyCode > 47 && keyCode < 58) || // number keys
133 keyCode == 32 || keyCode == 13 || // spacebar & return key
134 (keyCode > 64 && keyCode < 91) || // letter keys
135 (keyCode > 95 && keyCode < 112) || // numpad keys
136 (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
137 (keyCode > 218 && keyCode < 223); // [\]' (in order)
138 return printable;
139 },
140
141 // convert printable numpad keys to number keys
142 _correctNumpadKeys: function(keyCode) {
143 return (keyCode > 95 && keyCode < 112) ? keyCode - 48 : keyCode;
144 },
145
146 _onKeydown: function(event) {
147 if (!this.preventInvalidInput && this.type !== 'number') {
148 return;
149 }
150 var regexp = this._patternRegExp;
151 if (!regexp) {
152 return;
153 }
154 var thisChar = String.fromCharCode(this._correctNumpadKeys(event.keyCode)) ;
155 if (this._isPrintable(event.keyCode) && !regexp.test(thisChar)) {
156 event.preventDefault();
157 }
158 },
159
160 /**
161 * Returns true if `value` is valid. The validator provided in `validator` w ill be used first,
162 * then any constraints.
163 * @return {Boolean} True if the value is valid.
164 */
165 validate: function() {
166 // Empty, non-required input is valid.
167 if (!this.required && this.value == '')
168 return true;
169
170 var valid;
171 if (this.hasValidator()) {
172 valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
173 } else {
174 this.invalid = !this.validity.valid;
175 valid = this.validity.valid;
176 }
177 this.fire('iron-input-validate');
178 return valid;
179 }
180
181 });
182
183 /*
184 The `iron-input-validate` event is fired whenever `validate()` is called.
185 @event iron-input-validate
186 */
187
188 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698