使用Javascript計算並顯示文本框中的字符數

Question

我正在處理一個項目，該項目需要我計算在文本框中輸入的字符數並在頁面上的其他位置動態顯示結果。

正如我所說，這最好是在jQuery或Javascript中完成。

在此先感謝。

Answer 1

我想分享我在我的項目中使用的答案，它工作正常。

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="4" Columns="50" placeholder="Maximum limit: 100 characters"></asp:TextBox><br /> 
<span id="spnCharLeft"></span> 

<script type='text/javascript'> 
    $('#spnCharLeft').css('display', 'none'); 
    var maxLimit = 100; 
    $(document).ready(function() { 
     $('#<%= txtComments.ClientID %>').keyup(function() { 
      var lengthCount = this.value.length;    
      if (lengthCount > maxLimit) { 
       this.value = this.value.substring(0, maxLimit); 
       var charactersLeft = maxLimit - lengthCount + 1;     
      } 
      else {     
       var charactersLeft = maxLimit - lengthCount;     
      } 
      $('#spnCharLeft').css('display', 'block'); 
      $('#spnCharLeft').text(charactersLeft + ' Characters left'); 
     }); 
    }); 
</script> 

來源：URL

Answer 2

你可以在jQuery的做到這一點（因爲你說你更喜歡它），假設你想使用id = 「文字」 顯示在一個div字符數：

$('textarea').keyup(updateCount); 
$('textarea').keydown(updateCount); 

function updateCount() { 
    var cs = $(this).val().length; 
    $('#characters').text(cs); 
} 

UPDATE：jsFiddle（由Dreami）

更新2：更新以包含長按的keydown。

Answer 3

<script Language="JavaScript"> 
<!-- 
function Length_TextField_Validator() 
{ 
    var len = form_name.text_name.value.length; //the length 
    return (true); 
} 
--> 
</script> 

<form name="form_name" method="get" action="http://www.codeave.com/html/get.asp" 
onsubmit="return Length_TextField_Validator()"> 
<input type="text" name="text_name"> 
<input type="submit" value="Submit"> 
</form> 

來源（S）：Text Validation

Answer 4

<script type="text/javascript"> 
function countChars(countfrom,displayto) { 
    var len = document.getElementById(countfrom).value.length; 
    document.getElementById(displayto).innerHTML = len; 
} 
</script> 

<textarea id="data" cols="40" rows="5" 
onkeyup="countChars('data','charcount');" onkeydown="countChars('data','charcount');" onmouseout="countChars('data','charcount');"></textarea><br> 
<span id="charcount">0</span> characters entered. 

普通的JavaScript。

Answer 5

雖然它已經被解決了，我很感興趣，分享的東西，我在我的一個項目已經使用：

<textarea id="message" cols="300" rows="200" onkeyup="countChar(this)" 
      placeholder="Type your message ..." > 
</textarea> 

<input id="text-character" class="input-mini uneditable-input" 
     placeholder="0 Chars" readonly /> 
<input id="text-parts" class="input-mini uneditable-input" 
     placeholder="0 Parts" readonly /> 
<input id="text-remaining" class="input-medium uneditable-input" 
     placeholder="160 Chars Remaining" readonly /> 

Javascript代碼：

function countChar(val) { 

    var len = val.value.length; 
    var ctext = len + " Chars"; 

    var str = val.value; 
    var parts = []; 
    var partSize = 160; 

    while (str) { 
     if (str.length < partSize) { 
      var rtext = (partSize - str.length) + " Chars Remaining"; 
      parts.push(str); 
      break; 
     } 
     else { 
      parts.push(str.substr(0, partSize)); 
      str = str.substr(partSize); 
     } 



    } 
    var ptext = parts.length + " Parts"; 

    $('#text-character').val(ctext); 
    $('#text-parts').val(ptext); 
    $('#text-remaining').val(rtext); 

} 

Answer 6

這是我的偏好：

<textarea></textarea>   
<span id="characters" style="color:#999;">400</span> <span style="color:#999;">left</span> 

然後jquery的方框

$('textarea').keyup(updateCount); 
$('textarea').keydown(updateCount); 

function updateCount() { 
var cs = [400- $(this).val().length]; 
$('#characters').text(cs); 
}