OLD | NEW |
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> |
OLD | NEW |