1<!-- 2Copyright (c) 2015 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-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 16Example: 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 23Theming 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