<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../paper-styles/paper-styles.html"> <link rel="import" href="paper-input-addon-behavior.html"> <!-- `<paper-input-char-counter>` is a character counter for use with `<paper-input-container>`. It shows the number of characters entered in the input and the max length if it is specified. <paper-input-container> <input is="iron-input" maxlength="20"> <paper-input-char-counter></paper-input-char-counter> </paper-input-container> ### Styling The following mixin is available for styling: Custom property | Description | Default ----------------|-------------|---------- `--paper-input-char-counter` | Mixin applied to the element | `{}` --> <dom-module id="paper-input-char-counter"> <template> <style> :host { display: inline-block; float: right; @apply(--paper-font-caption); @apply(--paper-input-char-counter); } :host-context([dir="rtl"]) { float: left; } </style> <span>[[_charCounterStr]]</span> </template> </dom-module> <script> Polymer({ is: 'paper-input-char-counter', behaviors: [ Polymer.PaperInputAddonBehavior ], properties: { _charCounterStr: { type: String, value: '0' } }, update: function(state) { if (!state.inputElement) { return; } state.value = state.value || ''; // Account for the textarea's new lines. var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length; if (state.inputElement.hasAttribute('maxlength')) { str += '/' + state.inputElement.getAttribute('maxlength'); } this._charCounterStr = str; } }); </script>