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

我正试图用

jQuery

为我的后台

input

文本编写一个简单的剩余字符计数器，但它不起作用：

<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>

$（文档）.ready（函数（）{
功能文本\计数器（输入\文本，目标）{
var max=$（输入文本）.attr（“maxlength”）；
$（输入\文本）.keydown（函数（）{
var timer=setTimeout（函数（）{
var text=$（input_text）.text（）；
var current=text.length；
$（目标）.text（当前+“/”+最大值）；
}, 1);
});
}               
文本#u计数器（“#描述“，“#描述#计数器”）；
});

如果我开始在

输入

中写入，

span

元素在

12/250

中更改并冻结在此处（12==“Default text”.length）

我哪里错了？

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

var text=$（input_text）.val（）
尝试使用val（）而不是text（）

var text=$（input_text）.val（）
这是我为您提供的解决方案：

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"));

例如：

有几点不同。首先，我使用
keyup
事件。否则，在删除字符之前运行代码（可能这就是为什么要使用
setTimeout
）-它也会在退格时被激发。我还将jQuery对象传递到
text\u计数器
函数中。这是一个简单的jQuery选择器（而不是多个
$（输入文本）
调用）。在
keyup
处理程序中，我只调用
this.value.length
，因为
this
是一个HTML输入元素，我不需要为此而麻烦jQuery

下面是
text\u计数器的另一个实现：

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

例如：

我没有处理关键事件，而是设置了一个计时器，每隔100ms设置
target
的文本。为什么要展示这个？当你处理一个关键事件时，它只会触发一次。我给出的第二段代码将持续轮询文本框的长度，这样即使按下backspace按钮，跨度也会得到更新

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

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"));

例如：

有几点不同。首先，我使用
keyup
事件。否则，在删除字符之前运行代码（可能这就是为什么要使用
setTimeout
）-它也会在退格时被激发。我还将jQuery对象传递到
text\u计数器
函数中。这是一个简单的jQuery选择器（而不是多个
$（输入文本）
调用）。在
keyup
处理程序中，我只调用
this.value.length
，因为
this
是一个HTML输入元素，我不需要为此而麻烦jQuery

下面是
text\u计数器的另一个实现：

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

例如：

我没有处理关键事件，而是设置了一个计时器，每隔100ms设置
target
的文本。为什么要展示这个？当你处理一个关键事件时，它只会触发一次。我给出的第二段代码将持续轮询文本框的长度，这样即使按下backspace按钮，跨度也会得到更新

我不喜欢第二个解决方案，因为它会产生不必要的工作（无论用户与该框的交互如何，
setInterval
都会运行），但我确实展示了它，因为您可以同时使用这两个解决方案。例如，您可以在按键上调用5秒钟的轮询或其他方法来充分利用这两个世界：）
我遇到了类似的问题，为此我编写了一个jQuery/BootStrap插件。
您可以将其用作：

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

您可以从github获得它：
（你也会发现一些例子）。
我也有类似的问题，为此我编写了一个jQuery/BootStrap插件。
您可以将其用作：

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

您可以从github获得它：
（您还可以找到一些示例）。
为什么您有计时器？因为他应该使用按键事件：）为什么您有计时器？因为他应该使用按键事件：）