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}}" assetpath=""> |
| 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}}" aut
ofocus?="{{autofocus}}" required?="{{required}}" readonly?="{{readonly}}" aria-l
abel="{{label || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputCha
ngeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}"></tex
tarea> |
| 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 |
| 108 |
| 109 </polymer-element> |
| 110 <script src="core-input-extracted.js"></script> |
OLD | NEW |