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