具有多个输入的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. 我将焦点添加到事件列表中，以便在输入输入时更新计数器。您可能需要添加单独的模糊事件处理程序，以便在没有输入聚焦时隐藏计数器。