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

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

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh 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
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior. html">
12 13
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
14 By default you can only get notified of changes to an `input`'s `value` due to u ser input: 22 By default you can only get notified of changes to an `input`'s `value` due to u ser input:
15 23
16 <input value="{{myValue::input}}"> 24 <input value="{{myValue::input}}">
17 25
18 `iron-input` adds the `bind-value` property that mirrors the `value` property, a nd can be used 26 `iron-input` adds the `bind-value` property that mirrors the `value` property, a nd can be used
19 for two-way data binding. `bind-value` will notify if it is changed either by us er input or by script. 27 for two-way data binding. `bind-value` will notify if it is changed either by us er input or by script.
20 28
21 <input is="iron-input" bind-value="{{myValue}}"> 29 <input is="iron-input" bind-value="{{myValue}}">
22 30
23 --> 31 ### Custom validators
24 <script> 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 */
25 49
26 Polymer({ 50 Polymer({
27 51
28 is: 'iron-input', 52 is: 'iron-input',
29 53
30 extends: 'input', 54 extends: 'input',
31 55
56 behaviors: [
57 Polymer.IronValidatableBehavior
58 ],
59
32 properties: { 60 properties: {
33 61
34 /** 62 /**
35 * Use this property instead of `value` for two-way data binding. 63 * Use this property instead of `value` for two-way data binding.
36 */ 64 */
37 bindValue: { 65 bindValue: {
38 observer: '_bindValueChanged', 66 observer: '_bindValueChanged',
39 type: String 67 type: String
40 }, 68 },
41 69
42 /** 70 /**
43 * Set to true to prevent the user from entering invalid input or setting 71 * Set to true to prevent the user from entering invalid input. The new in put characters are
44 * invalid `bindValue`. 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`).
45 */ 74 */
46 preventInvalidInput: { 75 preventInvalidInput: {
47 type: Boolean 76 type: Boolean
48 }, 77 },
49 78
79 /**
80 * Regular expression to match valid input characters.
81 */
82 allowedPattern: {
83 type: String
84 },
85
50 _previousValidInput: { 86 _previousValidInput: {
51 type: String, 87 type: String,
52 value: '' 88 value: ''
53 } 89 }
54 90
55 }, 91 },
56 92
57 listeners: { 93 listeners: {
58 'input': '_onInput' 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;
59 }, 112 },
60 113
61 ready: function() { 114 ready: function() {
62 this._validateValue();
63 this.bindValue = this.value; 115 this.bindValue = this.value;
64 }, 116 },
65 117
66 _bindValueChanged: function() { 118 _bindValueChanged: function() {
67 // If this was called as a result of user input, then |_validateValue| 119 if (this.value !== this.bindValue) {
68 // has already been called in |_onInput|, and it doesn't need to be
69 // called again.
70 if (this.value != this.bindValue) {
71 this.value = this.bindValue; 120 this.value = this.bindValue;
72 this._validateValue();
73 } 121 }
74
75 // manually notify because we don't want to notify until after setting val ue 122 // manually notify because we don't want to notify until after setting val ue
76 this.fire('bind-value-changed', {value: this.bindValue}); 123 this.fire('bind-value-changed', {value: this.bindValue});
77 }, 124 },
78 125
79 _onInput: function() { 126 _onInput: function() {
80 this._validateValue(); 127 this.bindValue = this.value;
81 }, 128 },
82 129
83 _validateValue: function() { 130 _isPrintable: function(keyCode) {
84 var value; 131 var printable =
85 if (this.preventInvalidInput && !this.validity.valid) { 132 (keyCode > 47 && keyCode < 58) || // number keys
86 value = this._previousValidInput; 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);
87 } else { 173 } else {
88 value = this._previousValidInput = this.value; 174 this.invalid = !this.validity.valid;
175 valid = this.validity.valid;
89 } 176 }
90 this.bindValue = this.value = value; 177 this.fire('iron-input-validate');
178 return valid;
91 } 179 }
92 180
93 }) 181 });
182
183 /*
184 The `iron-input-validate` event is fired whenever `validate()` is called.
185 @event iron-input-validate
186 */
187
94 </script> 188 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698