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

Question

我在下面找到了简单文本框字符计数器（如 Twitter）的解决方案。

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

原因是我想在将 URL 和文本作为同一条推文发送之前验证它们。

谁能指出我正确的方向？

<span class="counter"></span>
<input type="text" name="field1" id="field1" class="word_count" />
<input type="text" name="field2" id="field2" class="word_count" />

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() 方法。它比绑定有一些其他功能，但基本上是较新的方法。
3. 您不需要遍历所有输入。 jQuery 会将您的事件绑定到它在结果集中找到的所有元素。基本上，当您只需要一个输入时，您会为每个输入创建一个新函数。
4. 我将焦点添加到事件列表中，以便在您输入输入时更新计数器。您可能需要添加一个单独的模糊事件处理程序来在没有输入焦点时隐藏计数器。