charcounter.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.ui.CharCounter</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.dom');
  13. goog.require('goog.ui.CharCounter');
  14. goog.require('goog.ui.CharCounter.Display');
  15. </script>
  16. <link rel="stylesheet" href="css/demo.css">
  17. </head>
  18. <body>
  19. <h1>goog.ui.CharCounter</h1>
  20. <p>
  21. <input type="text" id="input1">
  22. <span id="counter1"></span> character(s) remaining
  23. </p>
  24. <p>
  25. <input type="text" id="input2">
  26. You have entered <span id="counter2"></span> character(s) of a maximum 160.
  27. </p>
  28. <p>
  29. <input type="text" id="input3">
  30. <span id="counter3"></span> character(s) remaining
  31. <button onclick="c3.setMaxLength(10);">setMaxLength(10)</button>
  32. <button onclick="c3.setMaxLength(20);">setMaxLength(20)</button>
  33. </p>
  34. <p>
  35. <textarea id="input4"></textarea>
  36. <span id="counter4"></span> character(s) remaining
  37. </p>
  38. <script>
  39. var c1 = new goog.ui.CharCounter(document.getElementById('input1'),
  40. document.getElementById('counter1'), 160);
  41. var c2 = new goog.ui.CharCounter(document.getElementById('input2'),
  42. document.getElementById('counter2'), 160,
  43. goog.ui.CharCounter.Display.INCREMENTAL);
  44. var c3 = new goog.ui.CharCounter(document.getElementById('input3'),
  45. document.getElementById('counter3'), 10);
  46. var c4 = new goog.ui.CharCounter(document.getElementById('input4'),
  47. document.getElementById('counter4'), 255);
  48. </script>
  49. </body>
  50. </html>