1<!-- 2Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE 4The complete set of authors may be found at http://polymer.github.io/AUTHORS 5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS 6Code distributed by Google as part of the polymer project is also 7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS 8--> 9 10<!-- 11 12Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field">Single line text field</a> 13 14`paper-input` is a single-line text field for user input. It is a convenience element composed of 15a `paper-input-decorator` and a `input is="core-input"`. 16 17Example: 18 19 <paper-input label="Your Name"></paper-input> 20 21If you need more control over the `input` element, use `paper-input-decorator`. 22 23Theming 24------- 25 26`paper-input` can be styled similarly to `paper-input-decorator`. 27 28Form submission 29--------------- 30 31Unlike inputs using `paper-input-decorator` directly, `paper-input` does not work out of 32the box with the native `form` element. This is because the native `form` is not aware of 33shadow DOM and does not treat `paper-input` as a form element. 34 35Use `paper-input-decorator` directly, or see 36<a href="https://github.com/garstasio/ajax-form">`ajax-form`</a> for a possible solution 37to submitting a `paper-input`. 38 39Validation 40---------- 41 42Use `paper-input-decorator` if you would like to implement validation. 43 44@group Paper Elements 45@element paper-input 46@homepage github.io 47--> 48<link href="../polymer/polymer.html" rel="import"> 49<link href="../core-input/core-input.html" rel="import"> 50 51<link href="paper-input-decorator.html" rel="import"> 52 53<polymer-element name="paper-input"> 54 55<template> 56 57 <style> 58 :host { 59 display: inline-block; 60 } 61 </style> 62 63 <paper-input-decorator id="decorator" label="{{label}}" floatingLabel="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}"> 64 <input is="core-input" id="input" value="{{value}}" committedValue="{{committedValue}}" on-change="{{changeAction}}" disabled?="{{disabled}}"> 65 </paper-input-decorator> 66 67</template> 68 69<script> 70 71 Polymer('paper-input', { 72 73 publish: { 74 /** 75 * The label for this input. It normally appears as grey text inside 76 * the text input and disappears once the user enters text. 77 * 78 * @attribute label 79 * @type string 80 * @default '' 81 */ 82 label: '', 83 84 /** 85 * If true, the label will "float" above the text input once the 86 * user enters text instead of disappearing. 87 * 88 * @attribute floatingLabel 89 * @type boolean 90 * @default false 91 */ 92 floatingLabel: false, 93 94 /** 95 * Set to true to style the element as disabled. 96 * 97 * @attribute disabled 98 * @type boolean 99 * @default false 100 */ 101 disabled: {value: false, reflect: true}, 102 103 /** 104 * The current value of the input. 105 * 106 * @attribute value 107 * @type String 108 * @default '' 109 */ 110 value: '', 111 112 /** 113 * The most recently committed value of the input. 114 * 115 * @attribute committedValue 116 * @type String 117 * @default '' 118 */ 119 committedValue: '' 120 121 }, 122 123 /** 124 * Focuses the `input`. 125 * 126 * @method focus 127 */ 128 focus: function() { 129 this.$.input.focus(); 130 }, 131 132 valueChanged: function() { 133 this.$.decorator.updateLabelVisibility(this.value); 134 }, 135 136 changeAction: function(e) { 137 // re-fire event that does not bubble across shadow roots 138 this.fire('change', null, this); 139 } 140 141 }); 142 143</script> 144 145</polymer-element> 146