2

我在下面找到了一个简单的文本框字符计数器（如 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');
            }
        });
    });
});
4

1 回答 1

4

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

这是问题所在。

  1. 该代码正在寻找不存在的输入字段上的 maxLength 属性。因此 NaN 消息。
  2. 如果您使用最新版本的 jQuery，您应该使用 .on() 方法。它有一些其他的功能，但基本上它是较新的方法。
  3. 您不需要遍历所有输入。jQuery 会将您的事件绑定到它在结果集中找到的所有元素。基本上，当只需要一个输入时，您正在为每个输入创建一个新函数。
  4. 我将焦点添加到事件列表中，以便在您输入输入时更新计数器。您可能希望添加一个单独的模糊事件处理程序以在没有输入焦点时隐藏计数器。
于 2012-05-21T00:16:24.423 回答