Question

我一直在尝试实现一个字符计数器，它显示用户可以使用jQuery在文本区域内输入的字符数。这是代码：

HTML：

<textarea id="questionTextBox"  placeholder="Enter question e.g. How do I as for a pay raise?" name="data[Qna_question][question_text]"></textarea>

<span id="noOfChar">128</span> characters remaining

JQUERY：

jQuery(document).ready(function(){

 jQuery("#questionTextBox").keypress(function () {

   var qText = jQuery("#questionTextBox").val();

   if(qText.length <= 127) {
    jQuery("#noOfChar").html(128 - qText.length - 1);
   } else {
       jQuery("#questionTextBox").val(qText.substring(0,128));
   }

  });

}）;

这是jsfiddle http://jsfiddle.net/Cy667/

它无法正常工作。

当它达到128个字符时，它不应再使用任何值
当我删除字符时，计数器应该增加。当我在达到128限制后删除前几个字符时，它没有增加。

Answer 1

您需要使用所有三个jQuery键事件来捕获用户使用键盘执行的所有操作。

这可以解决您的问题：JSFiddle

$(document).ready(function(){

    function updateCount ()
    {
        var qText = jQuery("#questionTextBox").val();

       if(qText.length < 128) {
           jQuery("#noOfChar").html(128 - qText.length);
       } else {
           jQuery("#noOfChar").html(0);
           jQuery("#questionTextBox").val(qText.substring(0,128));
       }
    }

    $("#questionTextBox").keyup(function () {
        updateCount();
    });
    $("#questionTextBox").keypress(function () {
        updateCount();
    });
    $("#questionTextBox").keydown(function () {
        updateCount();
    });
});

Answer 2

对于第一个问题，您可以使用textarea的maxlength属性

<textarea maxlength="128"></text>

对于第二个问题，我尝试通过按功能键（例如，退格键，移位等）无效，因此您可以将该功能绑定到textarea的 onchange 监听器。

根据在textarea中输入的字符数减少span中的计数值

2 个答案: