1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12<head> 13 14 <meta charset="utf-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 17 18 <title>iron-input demo</title> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 22 <link rel="import" href="../iron-input.html"> 23 <link rel="import" href="../../paper-styles/color.html"> 24 <link rel="import" href="../../paper-styles/demo-pages.html"> 25 <link rel="import" href="../../paper-styles/typography.html"> 26 27 <style is="custom-style"> 28 29 .vertical-section { 30 @apply(--paper-font-body1); 31 32 line-height: 40px; 33 } 34 35 code { 36 color: var(--google-grey-700); 37 } 38 39 input[is=iron-input] { 40 width: 100%; 41 box-sizing: border-box; 42 } 43 44 input, button { 45 font-size: 20px; 46 padding: 0.2em; 47 } 48 49 </style> 50</head> 51<body> 52 53 <div class="vertical-section vertical-section-container centered"> 54 <template is="dom-bind"> 55 <p> 56 <input is="iron-input" bind-value="{{bindValue}}" value="{{value::input}}"> 57 <br> 58 bind to <code>bind-value</code>: <b>[[bindValue]]</b> 59 <br> 60 bind to <code>value::input</code>: <b>{{value}}</b> 61 </p> 62 63 <p on-click="setValue"> 64 set bind-value to: <input> <button is="paper-button" value="bindValue">set</button> 65 <br> 66 set value to: <input> <button value="value">set</button> 67 </p> 68 </template> 69 <p>only allows these characters: 70 <code>!@#0123456789</code></p> 71 <input is="iron-input" allowed-pattern="[!@#0-9]" prevent-invalid-input> 72 73 </div> 74 75 <script> 76 var scope = document.querySelector('template[is=dom-bind]'); 77 78 scope.setValue = function(event) { 79 if (!(event.target instanceof HTMLButtonElement)) { 80 return; 81 } 82 document.querySelector('input[is=iron-input]')[event.target.value] = event.target.previousElementSibling.value; 83 } 84 </script> 85 86</body> 87</html> 88