2012-03-19 24 views

Trả lời

2

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

46

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.

+0

nhờ này làm việc hoàn hảo – Kay

+2

Có lẽ bạn có thể chọn được trả lời sau đó, nhờ – aurbano

+1

Một năm sau bạn đã giúp tôi! Cảm ơn Man! – Travis

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

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

3

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

} 
+0

Tôi đã thử điều này trong JSFiddle nhưng nó không hoạt động. – unidha

+0

@unidha bạn cần phải bao gồm Jquery cũng vì ký hiệu $ trên 3 dòng dưới cùng biểu thị rằng Jquery được sử dụng để chọn các phần tử. –

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); 
} 
+2

Điều này sẽ không kích hoạt khi nhấp chuột phải và dán. Bạn có thể sử dụng '$ ('textarea'). On ('input', updateCount);' – Fred