Đếm và hiển thị số ký tự trong hộp văn bản bằng cách sử dụng Javascript

Question

Tôi đang làm việc trên một dự án yêu cầu tôi đếm số ký tự được nhập trong hộp văn bản và hiển thị động kết quả ở nơi khác trên trang.

Như tôi đã nói, điều này tốt nhất nên được thực hiện trong jQuery hoặc Javascript.

Xin cảm ơn trước.

Answer 1

Tôi muốn chia sẻ câu trả lời mà tôi đã sử dụng trong dự án của mình và nó hoạt động tốt.

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

Nguồn: URL

Answer 2

Bạn có thể làm điều này trong jQuery (kể từ khi bạn nói rằng bạn thích nó), giả sử bạn muốn số ký tự hiển thị trong một div với id = "nhân vật":

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

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

UPDATE: jsFiddle (bởi Dreami)

CẬP NHẬT 2: Cập nhật để bao gồm tính năng nhấn phím cho các lần nhấn dài.

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> 

Nguồn (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. 

Plain Javascript.

Answer 5

Mặc dù nó đã được đã được giải quyết, tôi đang quan tâm để chia sẻ một cái gì đó mà tôi đã sử dụng trong một dự án của tôi:

<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 mã:

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

Đây là sở thích của tôi :

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

Sau đó khối jquery

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

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