1 <!-- 2 Copyright (c) 2015 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 Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-character-counter">Character counter</a> 13 14 `paper-char-counter` adds a character counter for paper input fields with a character restriction in place. 15 16 Example: 17 18 <paper-input-decorator> 19 <input id="input1" is="core-input" maxlength="5"> 20 <paper-char-counter class="footer" target="input1"></paper-char-counter> 21 </paper-input-decorator> 22 23 Theming 24 ------- 25 26 `paper-char-counter` uses `paper-input-decorator`'s error `core-style` for global theming. 27 28 @group Paper Elements 29 @element paper-char-counter 30 @homepage github.io 31 --> 32 <link href="../polymer/polymer.html" rel="import"> 33 <link href="../core-style/core-style.html" rel="import"> 34 35 <core-style id="paper-char-counter"> 36 :host(.invalid) { 37 color: {{g.paperInput.invalidColor}}; 38 } 39 </core-style> 40 41 <polymer-element name="paper-char-counter"> 42 43 <template> 44 45 <style> 46 :host { 47 display: inline-block; 48 float: right; 49 color: #757575; 50 font-size: 0.75em; 51 padding: 0.5em 0 0.5em 0.5em; 52 } 53 </style> 54 55 <core-style ref="paper-char-counter"></core-style> 56 57 <div class="counter-text" aria-hidden="true" hidden?="{{!showCounter || !_maxChars}}"> 58 <span>{{_charCount}} / {{_maxChars}}</span> 59 </div> 60 61 </template> 62 63 <script> 64 65 Polymer({ 66 67 publish: { 68 /** 69 * The id of the textinput or textarea that should be monitored. 70 * 71 * @attribute target 72 * @type string 73 * @default null 74 */ 75 target: null, 76 77 /** 78 * If false, don't show the character counter. Used in conjunction with 79 * `paper-input-decorator's` `error` field. 80 * 81 * @attribute showCounter 82 * @type boolean 83 * @default true 84 */ 85 showCounter: true 86 }, 87 88 /* Number of characters in the current input */ 89 _charCount: 0, 90 91 /* Equal to the target element's maxLength attribute. */ 92 _maxChars: 0, 93 94 /* True if the number of characters in the input exceeds _maxChars */ 95 _isCounterInvalid: false, 96 97 ready: function() { 98 if (!this.target) 99 return; 100 var targetElement = document.getElementById(this.target); 101 this._maxChars = targetElement.maxLength; 102 targetElement.addEventListener('input', this.inputAction.bind(this)); 103 }, 104 105 inputAction: function(e) { 106 this._charCount = e.target.value.length; 107 this._isCounterInvalid = this._maxChars && this._charCount >= this._maxChars; 108 }, 109 110 _isCounterInvalidChanged: function() { 111 debugger 112 this.classList.toggle('invalid', this._isCounterInvalid); 113 this.fire('char-counter-error', 114 {"hasError": this._isCounterInvalid, 115 "hideErrorIcon": this.showCounter}); 116 } 117 }); 118 119 </script> 120 121 </polymer-element> 122
