Question

我找到了一个javascript代码，用于计算textarea上的字符数。 This is the code

我的问题是我正在做一个后端，用户可以在其中加载各种textareas，如<textarea name="description[]"></textarea>。我如何创建一个在所有textareas上运行但不同计数的脚本？

提前谢谢！

Answer 1

这将允许您只为文本区域提供countableText类，以便为它们添加计数器。

  <script type='text/javascript'>
  $(window).load(function(){
    var characterLimit = 150;
    $('.countableText').each(function(index){
      $(this).wrap('<div id="container_' + (index+1) + '">');
      $('<span id="remainingCharacters_' + (index+1) + '">150</span>').appendTo($('#container_' + (index+1)));

      $(this).bind('keyup', function(){
        var charactersUsed = $(this).val().length;

        if(charactersUsed > characterLimit){
            charactersUsed = characterLimit;
            $(this).val($(this).val().substr(0,characterLimit));
            $(this).scrollTop($(this)[0].scrollHeight);
        }

        var charactersRemaining = characterLimit - charactersUsed;

        $('#remainingCharacters_' + (index+1)).html(charactersRemaining);
      })  
    }); 
  });
  </script>

  </head>
  <body>
    <textarea class="countableText"></textarea>  
    <textarea class="countableText"></textarea>  
    <textarea class="countableText"></textarea>    
  </body>
</html>

以下是演示：http://jsfiddle.net/mEFGq/1/

Answer 2

如果您正在进行多个计数器，则必须将keyup属性添加到textarea中，并为结果选择一个范围，如下例所示：

<textarea id="myArea1" maxLength="100" onkeyup="javascript:updateCounter(this, "span1");" onkeypress="javascript:limitBox(this);"/>
<span id="span1"></span>

function limitBox(textbox) {
            if ($(textbox).val().length == $(textbox).attr("maxLength")) {
                return false;
            }

            if ($(textbox).val().length > $(textbox).attr("maxLength")) {
                var str = $(textbox).val().substring(0, $(textbox).attr("maxLength"));
                $(textbox).val(str);
            }

        }


function updateCounter(textbox, spanToUpdate) {
    if ($(textbox).val().length > $(textbox).attr("maxLength")) {
        var str = $(textbox).val().substring(0, $(textbox).attr("maxLength"));
        $(textbox).val(str);
    }

    var myCount = $(textbox).attr("maxLength") - $(textbox).val().length;

    $(spanToUpdate).html(myCount);


}

我也有最大长度属性。如果不需要，可以修改删除。

各种textarea的字符计数器是动态加载的，怎么做？

2 个答案: