OLD | NEW |
1 # iron-input | |
2 | 1 |
3 An input with data binding. | 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 iron-input.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/iron-input) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/iron-input)_ |
| 15 |
| 16 |
| 17 ##<iron-input> |
| 18 |
| 19 |
| 20 `<iron-input>` adds two-way binding and custom validators using `Polymer.IronVal
idatorBehavior` |
| 21 to `<input>`. |
| 22 |
| 23 ### Two-way binding |
4 | 24 |
5 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: | 25 By default you can only get notified of changes to an `input`'s `value` due to u
ser input: |
6 | 26 |
7 ```html | 27 <input value="{{myValue::input}}"> |
8 <input value="{{myValue::input}}"> | |
9 ``` | |
10 | 28 |
11 `iron-input` adds the `bind-value` property that mirrors the `value` property, a
nd can be used | 29 `iron-input` adds the `bind-value` property that mirrors the `value` property, a
nd can be used |
12 for two-way data binding. `bind-value` will notify if it is changed either by us
er input or by script. | 30 for two-way data binding. `bind-value` will notify if it is changed either by us
er input or by script. |
13 | 31 |
14 ```html | 32 <input is="iron-input" bind-value="{{myValue}}"> |
15 <input is="iron-input" bind-value="{{myValue}}"> | 33 |
16 ``` | 34 ### Custom validators |
| 35 |
| 36 You can use custom validators that implement `Polymer.IronValidatorBehavior` wit
h `<iron-input>`. |
| 37 |
| 38 <input is="iron-input" validator="my-custom-validator"> |
| 39 |
| 40 ### Stopping invalid input |
| 41 |
| 42 It may be desirable to only allow users to enter certain characters. You can use
the |
| 43 `prevent-invalid-input` and `allowed-pattern` attributes together to accomplish
this. This feature |
| 44 is separate from validation, and `allowed-pattern` does not affect how the input
is validated. |
| 45 |
| 46 <!-- only allow characters that match [0-9] --> |
| 47 <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> |
| 48 |
| 49 |
OLD | NEW |