• Home
Name Date Size #Lines LOC

..--

demo/03-May-2024-8861

test/03-May-2024-371272

.bower.jsonD03-May-20241.4 KiB4444

.gitignoreD03-May-202417 21

.travis.ymlD03-May-2024789 2423

CONTRIBUTING.mdD03-May-20243.4 KiB7839

README.mdD03-May-20241.7 KiB6027

bower.jsonD03-May-20241.1 KiB3635

hero.svgD03-May-2024752 2018

index.htmlD03-May-2024988 3114

iron-input.htmlD03-May-20249.9 KiB307241

README.md

1
2<!---
3
4This README is automatically generated from the comments in these files:
5iron-input.html
6
7Edit those files, and our readme bot will duplicate them over here!
8Edit this file, and the bot will squash your changes :)
9
10The bot does some handling of markdown. Please file a bug if it does the wrong
11thing! https://github.com/PolymerLabs/tedium/issues
12
13-->
14
15[![Build status](https://travis-ci.org/PolymerElements/iron-input.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-input)
16
17_[Demo and API docs](https://elements.polymer-project.org/elements/iron-input)_
18
19
20##&lt;iron-input&gt;
21
22`<iron-input>` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
23to `<input>`.
24
25### Two-way binding
26
27By default you can only get notified of changes to an `input`'s `value` due to user input:
28
29```html
30<input value="{{myValue::input}}">
31```
32
33`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
34for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
35
36```html
37<input is="iron-input" bind-value="{{myValue}}">
38```
39
40### Custom validators
41
42You can use custom validators that implement `Polymer.IronValidatorBehavior` with `<iron-input>`.
43
44```html
45<input is="iron-input" validator="my-custom-validator">
46```
47
48### Stopping invalid input
49
50It may be desirable to only allow users to enter certain characters. You can use the
51`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
52is separate from validation, and `allowed-pattern` does not affect how the input is validated.
53
54```html
55<!-- only allow characters that match [0-9] -->
56<input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
57```
58
59
60