third_party/polymer/components/core-input/core-input.html

   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.github.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/CONTRIBUTORS
   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/PATENTS
   8 -->
   9
  10 <!--
  11
  12 `core-input` is an unstyled single-line input field. It extends the native
  13 `input` element.
  14
  15 Example:
  16
  17     <input is="core-input">
  18
  19 The input's value is considered "committed" if the user hits the "enter" key
  20 or blurs the input after changing the value. The committed value is stored in
  21 the `committedValue` property.
  22
  23 If the input has `type = number`, this element will also prevent non-numeric characters
  24 from being typed into the text field.
  25
  26 Accessibility
  27 -------------
  28
  29 The following ARIA attributes are set automatically:
  30
  31 - `aria-label`: set to the `placeholder` attribute
  32 - `aria-disabled`: set if `disabled` is true
  33
  34 @group Polymer Core Elements
  35 @element core-input
  36 @extends input
  37 @homepage github.io
  38 -->
  39 <link href="../polymer/polymer.html" rel="import">
  40
  41 <style shim-shadowdom>
  42   /* FIXME consider theming */
  43
  44   html /deep/ input[is=core-input] {
  45     width: 20em;
  46     font: inherit;
  47     margin: 0;
  48     padding: 0;
  49     background-color: transparent;
  50     border: 0;
  51     outline: none;
  52   }
  53 </style>
  54
  55 <polymer-element name="core-input" extends="input">
  56
  57 <script>
  58
  59   Polymer('core-input', {
  60
  61     publish: {
  62
  63       /**
  64        * The "committed" value of the input, ie. the input value when the user
  65        * hits the "enter" key or blurs the input after changing the value. You
  66        * can bind to this value instead of listening for the "change" event.
  67        * Setting this property has no effect on the input value.
  68        *
  69        * @attribute committedValue
  70        * @type string
  71        * @default ''
  72        */
  73       committedValue: '',
  74
  75       /**
  76        * Set to true to prevent invalid input from being entered.
  77        *
  78        * @attribute preventInvalidInput
  79        * @type boolean
  80        * @default false
  81        */
  82       preventInvalidInput: false
  83
  84     },
  85
  86     previousValidInput: '',
  87
  88     eventDelegates: {
  89       input: 'inputAction',
  90       change: 'changeAction'
  91     },
  92
  93     ready: function() {
  94       /* set ARIA attributes */
  95       this.disabledHandler();
  96       this.placeholderHandler();
  97     },
  98
  99     attributeChanged: function(attr, old) {
 100       if (this[attr + 'Handler']) {
 101         this[attr + 'Handler'](old);
 102       }
 103     },
 104
 105     disabledHandler: function() {
 106       if (this.disabled) {
 107         this.setAttribute('aria-disabled', '');
 108       } else {
 109         this.removeAttribute('aria-disabled');
 110       }
 111     },
 112
 113     placeholderHandler: function() {
 114       if (this.placeholder) {
 115         this.setAttribute('aria-label', this.placeholder);
 116       } else {
 117         this.removeAttribute('aria-label');
 118       }
 119     },
 120
 121     /**
 122      * Commits the `value` to `committedValue`
 123      *
 124      * @method commit
 125      */
 126     commit: function() {
 127       this.committedValue = this.value;
 128     },
 129
 130     changeAction: function() {
 131       this.commit();
 132     },
 133
 134     inputAction: function(e) {
 135       if (this.preventInvalidInput) {
 136         if (!e.target.validity.valid) {
 137           e.target.value = this.previousValidInput;
 138         } else {
 139           this.previousValidInput = e.target.value;
 140         }
 141       }
 142     }
 143
 144   });
 145
 146 </script>
 147
 148 </polymer-element>