charcounter.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. // Copyright 2006 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Character counter widget implementation.
  16. *
  17. * @author eae@google.com (Emil A Eklund)
  18. * @see ../demos/charcounter.html
  19. */
  20. goog.provide('goog.ui.CharCounter');
  21. goog.provide('goog.ui.CharCounter.Display');
  22. goog.require('goog.dom');
  23. goog.require('goog.events');
  24. goog.require('goog.events.EventTarget');
  25. goog.require('goog.events.InputHandler');
  26. /**
  27. * CharCounter widget. Counts the number of characters in a input field or a
  28. * text box and displays the number of additional characters that may be
  29. * entered before the maximum length is reached.
  30. *
  31. * @extends {goog.events.EventTarget}
  32. * @param {HTMLInputElement|HTMLTextAreaElement} elInput Input or text area
  33. * element to count the number of characters in.
  34. * @param {Element} elCount HTML element to display the remaining number of
  35. * characters in. You can pass in null for this if you don't want to expose
  36. * the number of chars remaining.
  37. * @param {number} maxLength The maximum length.
  38. * @param {goog.ui.CharCounter.Display=} opt_displayMode Display mode for this
  39. * char counter. Defaults to {@link goog.ui.CharCounter.Display.REMAINING}.
  40. * @constructor
  41. * @final
  42. */
  43. goog.ui.CharCounter = function(elInput, elCount, maxLength, opt_displayMode) {
  44. goog.events.EventTarget.call(this);
  45. /**
  46. * Input or text area element to count the number of characters in.
  47. * @type {HTMLInputElement|HTMLTextAreaElement}
  48. * @private
  49. */
  50. this.elInput_ = elInput;
  51. /**
  52. * HTML element to display the remaining number of characters in.
  53. * @type {Element}
  54. * @private
  55. */
  56. this.elCount_ = elCount;
  57. /**
  58. * The maximum length.
  59. * @type {number}
  60. * @private
  61. */
  62. this.maxLength_ = maxLength;
  63. /**
  64. * The display mode for this char counter.
  65. * @type {!goog.ui.CharCounter.Display}
  66. * @private
  67. */
  68. this.display_ = opt_displayMode || goog.ui.CharCounter.Display.REMAINING;
  69. elInput.removeAttribute('maxlength');
  70. /**
  71. * The input handler that provides the input event.
  72. * @type {goog.events.InputHandler}
  73. * @private
  74. */
  75. this.inputHandler_ = new goog.events.InputHandler(elInput);
  76. goog.events.listen(
  77. this.inputHandler_, goog.events.InputHandler.EventType.INPUT,
  78. this.onChange_, false, this);
  79. this.checkLength();
  80. };
  81. goog.inherits(goog.ui.CharCounter, goog.events.EventTarget);
  82. /**
  83. * Display mode for the char counter.
  84. * @enum {number}
  85. */
  86. goog.ui.CharCounter.Display = {
  87. /** Widget displays the number of characters remaining (the default). */
  88. REMAINING: 0,
  89. /** Widget displays the number of characters entered. */
  90. INCREMENTAL: 1
  91. };
  92. /**
  93. * Sets the maximum length.
  94. *
  95. * @param {number} maxLength The maximum length.
  96. */
  97. goog.ui.CharCounter.prototype.setMaxLength = function(maxLength) {
  98. this.maxLength_ = maxLength;
  99. this.checkLength();
  100. };
  101. /**
  102. * Returns the maximum length.
  103. *
  104. * @return {number} The maximum length.
  105. */
  106. goog.ui.CharCounter.prototype.getMaxLength = function() {
  107. return this.maxLength_;
  108. };
  109. /**
  110. * Sets the display mode.
  111. *
  112. * @param {!goog.ui.CharCounter.Display} displayMode The display mode.
  113. */
  114. goog.ui.CharCounter.prototype.setDisplayMode = function(displayMode) {
  115. this.display_ = displayMode;
  116. this.checkLength();
  117. };
  118. /**
  119. * Returns the display mode.
  120. *
  121. * @return {!goog.ui.CharCounter.Display} The display mode.
  122. */
  123. goog.ui.CharCounter.prototype.getDisplayMode = function() {
  124. return this.display_;
  125. };
  126. /**
  127. * Change event handler for input field.
  128. *
  129. * @param {goog.events.BrowserEvent} event Change event.
  130. * @private
  131. */
  132. goog.ui.CharCounter.prototype.onChange_ = function(event) {
  133. this.checkLength();
  134. };
  135. /**
  136. * Checks length of text in input field and updates the counter. Truncates text
  137. * if the maximum lengths is exceeded.
  138. */
  139. goog.ui.CharCounter.prototype.checkLength = function() {
  140. var count = this.elInput_.value.length;
  141. // There's no maxlength property for textareas so instead we truncate the
  142. // text if it gets too long. It's also used to truncate the text in a input
  143. // field if the maximum length is changed.
  144. if (count > this.maxLength_) {
  145. var scrollTop = this.elInput_.scrollTop;
  146. var scrollLeft = this.elInput_.scrollLeft;
  147. this.elInput_.value = this.elInput_.value.substring(0, this.maxLength_);
  148. count = this.maxLength_;
  149. this.elInput_.scrollTop = scrollTop;
  150. this.elInput_.scrollLeft = scrollLeft;
  151. }
  152. if (this.elCount_) {
  153. var incremental = this.display_ == goog.ui.CharCounter.Display.INCREMENTAL;
  154. goog.dom.setTextContent(
  155. this.elCount_, String(incremental ? count : this.maxLength_ - count));
  156. }
  157. };
  158. /** @override */
  159. goog.ui.CharCounter.prototype.disposeInternal = function() {
  160. goog.ui.CharCounter.superClass_.disposeInternal.call(this);
  161. delete this.elInput_;
  162. this.inputHandler_.dispose();
  163. this.inputHandler_ = null;
  164. };