Question

我正在尝试使用input为我的后台jQuery文本编写一个简单的剩余字符计数器，但它不起作用：

<script type="text/javascript">
$(document).ready(function(){

function text_counter (input_text, target) {
    var max = $(input_text).attr("maxlength");
    $(input_text).keydown (function () {
        var timer = setTimeout (function () {
            var text = $(input_text).text();
            var current = text.length;
            $(target).text(current + "/" + max);
        }, 1);
    });
}               
text_counter ("#description", "#description_counter");

});
</script>

<input id="description" type="text" maxlength="250" value="Default text">
<span id="description_counter"></span>

如果我开始在input内写，span元素在12/250中更改并冻结在这里（12 ==“默认文本”.length）。

我哪里错了？

Answer 1

尝试使用val（）而不是text（）

var text = $(input_text).val();

Answer 2

http://jsbin.com/epeva5/edit

Answer 3

这是我的解决方案：

function text_counter(input_text, target) {
    var max = input_text.attr("maxlength");
    input_text.keyup(function() {
        target.text(this.value.length + "/" + max)
    });
}

text_counter($("#description"), $("#description_counter"));

示例：http://jsfiddle.net/jonathon/dkWHp/

有几点不同。首先，我使用keyup事件。否则你在删除字符之前运行代码（也许这就是你使用setTimeout的原因） - 它也会在退格时触发。我还将jQuery对象传递给text_counter函数。这只是你创建单个jQuery选择器（而不是多个$(input_text)调用）。在keyup处理程序中，我只是调用this.value.length，因为this是一个HTML输入元素，我不需要为此烦恼。

为了更好的衡量，这是text_counter的另一个实现：

function text_counter(input_text, target) {
    var max = input_text.attr("maxlength");
    setInterval(function(){
        target.text(input_text.val().length + "/" + max)
    }, 100);
}

示例：http://jsfiddle.net/jonathon/vZHGU/

我没有处理关键事件，而是设置了一个定时器，每100ms设置target的文本。为什么这个？处理键事件时，它只会触发一次。我给出的第二段代码将不断轮询文本框的长度，以便即使按下退格按钮也可以更新跨度。

我不喜欢第二种解决方案，因为它会产生不必要的工作（无论用户与盒子的交互如何，setInterval都会运行）但我确实展示了它，因为你可以使用这两种解决方案。例如，您可以在按键或其他内容上调用5秒的轮询以充分利用这两个世界：）

Answer 4

我有类似的问题，我为此编写了一个jQuery / BootStrap插件。您可以将其用作：

$('input.className').maxlength({
   threshold: 10,
   warningClass: "label label-success",
   limitReachedClass: "label label-important",
   separator: ' of ',
   preText: 'You have ',
   postText: ' chars remaining.'
 });

你可以从github获得它：http://mimo84.github.io/bootstrap-maxlength/ （你也会找到一些例子）。

Answer 5

$(function(){

  function text_counter (input_text, target) 
  {
    var $input = $(input_text);
    var $target = $(target);
    var max = $input.attr("maxlength");
    var defaultText = $input.val();

    $(input_text).keypress(function () {
      var val = $input.val();
      var len = val.length;
      if (val == defaultText) {
        len == 0;
      }
      $target.text(len + "/" + max);
    });
  }
  text_counter ("#description", "#description_counter");

});

jQuery：输入文本剩余的字符计数器

5 个答案: