Home | History | Annotate | Download | only in paper-input 
      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.github.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/CONTRIBUTORS.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/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../polymer/polymer.html">
     12 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
     13 <link rel="import" href="../iron-input/iron-input.html">
     14 <link rel="import" href="paper-input-behavior.html">
     15 <link rel="import" href="paper-input-char-counter.html">
     16 <link rel="import" href="paper-input-container.html">
     17 <link rel="import" href="paper-input-error.html">
     18 
     19 <!--
     20 Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html)
     21 
     22 `<paper-input>` is a single-line text field with Material Design styling.
     23 
     24     <paper-input label="Input label"></paper-input>
     25 
     26 It may include an optional error message or character counter.
     27 
     28     <paper-input error-message="Invalid input!" label="Input label"></paper-input>
     29     <paper-input char-counter label="Input label"></paper-input>
     30 
     31 It can also include custom prefix or suffix elements, which are displayed
     32 before or after the text input itself. In order for an element to be
     33 considered as a prefix, it must have the `prefix` attribute (and similarly
     34 for `suffix`).
     35 
     36     <paper-input label="total">
     37       <div prefix>$</div>
     38       <paper-icon-button suffix icon="clear"></paper-icon-button>
     39     </paper-input>
     40 
     41 A `paper-input` can use the native `type=search` or `type=file` features.
     42 However, since we can't control the native styling of the input (search icon,
     43 file button, date placeholder, etc.), in these cases the label will be
     44 automatically floated. The `placeholder` attribute can still be used for
     45 additional informational text.
     46 
     47     <paper-input label="search!" type="search"
     48         placeholder="search for cats" autosave="test" results="5">
     49     </paper-input>
     50 
     51 See `Polymer.PaperInputBehavior` for more API docs.
     52 
     53 ### Focus
     54 
     55 To focus a paper-input, you can call the native `focus()` method as long as the
     56 paper input has a tab index.
     57 
     58 ### Styling
     59 
     60 See `Polymer.PaperInputContainer` for a list of custom properties used to
     61 style this element.
     62 
     63 
     64 @group Paper Elements
     65 @element paper-input
     66 @hero hero.svg
     67 @demo demo/index.html
     68 -->
     69 
     70 <dom-module id="paper-input">
     71   <template>
     72     <style>
     73       :host {
     74         display: block;
     75       }
     76 
     77       :host([hidden]) {
     78         display: none !important;
     79       }
     80 
     81       input::-webkit-input-placeholder {
     82         color: var(--paper-input-container-color, --secondary-text-color);
     83       }
     84 
     85       input:-moz-placeholder {
     86         color: var(--paper-input-container-color, --secondary-text-color);
     87       }
     88 
     89       input::-moz-placeholder {
     90         color: var(--paper-input-container-color, --secondary-text-color);
     91       }
     92 
     93       input:-ms-input-placeholder {
     94         color: var(--paper-input-container-color, --secondary-text-color);
     95       }
     96     </style>
     97 
     98     <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
     99 
    100       <content select="[prefix]"></content>
    101 
    102       <label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>
    103 
    104       <input is="iron-input" id="input"
    105         aria-labelledby$="[[_ariaLabelledBy]]"
    106         aria-describedby$="[[_ariaDescribedBy]]"
    107         disabled$="[[disabled]]"
    108         title$="[[title]]"
    109         bind-value="{{value}}"
    110         invalid="{{invalid}}"
    111         prevent-invalid-input="[[preventInvalidInput]]"
    112         allowed-pattern="[[allowedPattern]]"
    113         validator="[[validator]]"
    114         type$="[[type]]"
    115         pattern$="[[pattern]]"
    116         required$="[[required]]"
    117         autocomplete$="[[autocomplete]]"
    118         autofocus$="[[autofocus]]"
    119         inputmode$="[[inputmode]]"
    120         minlength$="[[minlength]]"
    121         maxlength$="[[maxlength]]"
    122         min$="[[min]]"
    123         max$="[[max]]"
    124         step$="[[step]]"
    125         name$="[[name]]"
    126         placeholder$="[[placeholder]]"
    127         readonly$="[[readonly]]"
    128         list$="[[list]]"
    129         size$="[[size]]"
    130         autocapitalize$="[[autocapitalize]]"
    131         autocorrect$="[[autocorrect]]"
    132         on-change="_onChange"
    133         tabindex$="[[tabindex]]"
    134         autosave$="[[autosave]]"
    135         results$="[[results]]"
    136         accept$="[[accept]]"
    137         multiple$="[[multiple]]">
    138 
    139       <content select="[suffix]"></content>
    140 
    141       <template is="dom-if" if="[[errorMessage]]">
    142         <paper-input-error>[[errorMessage]]</paper-input-error>
    143       </template>
    144 
    145       <template is="dom-if" if="[[charCounter]]">
    146         <paper-input-char-counter></paper-input-char-counter>
    147       </template>
    148 
    149     </paper-input-container>
    150   </template>
    151 </dom-module>
    152 
    153 <script>
    154   Polymer({
    155     is: 'paper-input',
    156 
    157     behaviors: [
    158       Polymer.IronFormElementBehavior,
    159       Polymer.PaperInputBehavior
    160     ]
    161   });
    162 </script>
    163