具有多个输入的JQuery字符计数器

我在下面找到了一个简单的文本框字符计数器（如Twitter）。

我一直在尝试修改代码以适应多个文本输入而不成功，而不是使用单个文本框。

原因是我想在将它们作为相同的推文发送之前validationURL和文本。

任何人都能指出我正确的方向吗？

JS：

 $(document).ready(function () { $('.word_count').each(function () { var $this = $(this); var counter = $this.parent().find('.counter'); var maxlength = $this.attr('maxlength'); counter.text('Only ' + maxlength + ' characters allowed'); $this.bind('input keyup keydown', function () { var value = $this.val(); if (value.length > 0) { counter.text((maxlength - $this.val().length) + ' characters left'); } else { counter.text('Only ' + maxlength + ' characters allowed'); } }); }); }); 

Answer 1

首先，这里是小提琴。 http://jsfiddle.net/bczengel/tsbfU/

这是问题所在。

1. 代码正在查找不存在的输入字段的maxLength属性。 因此NaN消息。
2. 如果你使用最新版本的jQuery，你应该使用.on（）方法。 它有一些其他function超过绑定，但基本上它是更新的方法。
3. 您不需要迭代所有输入。 jQuery会将您的事件绑定到它在结果集中找到的所有元素。 基本上，当只需要一个输入时，您就为每个输入创建了一个新函数。
4. 我将焦点添加到事件列表中，以便在输入输入时更新计数器。 您可能需要添加单独的模糊事件处理程序，以便在没有输入聚焦时隐藏计数器。