動態加載的各種textarea的字符計數器，如何操作？

我發現了一個計算textarea上的字符的JavaScript代碼。 This is the code。動態加載的各種textarea的字符計數器，如何操作？

我的問題是，我正在做一個後端，用戶可以加載像<textarea name="description[]"></textarea>這樣的各種textareas。我如何創建一個在所有textareas上運行但具有不同計數的腳本？

預先感謝您！

2011-03-06 udexter

這將允許你給文本區域的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/

來源

2011-03-06 02:15:18

嘿！謝謝！你會爲動態加載的textareas做些什麼？提前告訴你！ – udexter 2011-03-08 15:05:05

如果你正在做多個計數器，你必須在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); 


}

我也有有最大長度的屬性。如果你不需要，你可以修改刪除。

來源

2011-03-06 02:08:20 Avitus

動態加載的各種textarea的字符計數器，如何操作？

回答

相關問題