/web-app/js/jquery/jquery.charcounter.js

http://oraculo180.googlecode.com/ · JavaScript · 92 lines · 71 code · 6 blank · 15 comment · 12 complexity · 47885f802c5e9b869a8b5746b9379c6e MD5 · raw file

  1. /**
  2. *
  3. * jquery.charcounter.js version 1.2
  4. * requires jQuery version 1.2 or higher
  5. * Copyright (c) 2007 Tom Deater (http://www.tomdeater.com)
  6. * Licensed under the MIT License:
  7. * http://www.opensource.org/licenses/mit-license.php
  8. *
  9. */
  10. (function($) {
  11. /**
  12. * attaches a character counter to each textarea element in the jQuery object
  13. * usage: $("#myTextArea").charCounter(max, settings);
  14. */
  15. $.fn.charCounter = function (max, settings) {
  16. max = max || 100;
  17. settings = $.extend({
  18. container: "<span></span>",
  19. classname: "charcounter",
  20. format: "(%1 characters remaining)",
  21. pulse: true,
  22. delay: 0
  23. }, settings);
  24. var p, timeout;
  25. function count(el, container) {
  26. el = $(el);
  27. if (el.val().length > max) {
  28. el.val(el.val().substring(0, max));
  29. if (settings.pulse && !p) {
  30. pulse(container, true);
  31. };
  32. };
  33. if (settings.delay > 0) {
  34. if (timeout) {
  35. window.clearTimeout(timeout);
  36. }
  37. timeout = window.setTimeout(function () {
  38. container.html(settings.format.replace(/%1/, (max - el.val().length)));
  39. }, settings.delay);
  40. } else {
  41. container.html(settings.format.replace(/%1/, (max - el.val().length)));
  42. }
  43. };
  44. function pulse(el, again) {
  45. if (p) {
  46. window.clearTimeout(p);
  47. p = null;
  48. };
  49. el.animate({ opacity: 0.1 }, 100, function () {
  50. $(this).animate({ opacity: 1.0 }, 100);
  51. });
  52. if (again) {
  53. p = window.setTimeout(function () { pulse(el) }, 200);
  54. };
  55. };
  56. return this.each(function () {
  57. var container;
  58. if (!settings.container.match(/^<.+>$/)) {
  59. // use existing element to hold counter message
  60. container = $(settings.container);
  61. } else {
  62. // append element to hold counter message (clean up old element first)
  63. $(this).next("." + settings.classname).remove();
  64. container = $(settings.container)
  65. .insertAfter(this)
  66. .addClass(settings.classname);
  67. }
  68. $(this)
  69. .unbind(".charCounter")
  70. .bind("keydown.charCounter", function () { count(this, container); })
  71. .bind("keypress.charCounter", function () { count(this, container); })
  72. .bind("keyup.charCounter", function () { count(this, container); })
  73. .bind("focus.charCounter", function () { count(this, container); })
  74. .bind("mouseover.charCounter", function () { count(this, container); })
  75. .bind("mouseout.charCounter", function () { count(this, container); })
  76. .bind("paste.charCounter", function () {
  77. var me = this;
  78. setTimeout(function () { count(me, container); }, 10);
  79. });
  80. if (this.addEventListener) {
  81. this.addEventListener('input', function () { count(this, container); }, false);
  82. };
  83. count(this, container);
  84. });
  85. };
  86. })(jQuery);