Contare e visualizzare il numero di caratteri in una casella di testo utilizzando Javascript

Question

Sto lavorando a un progetto che richiede di contare il numero di caratteri immessi in una casella di testo e di visualizzare dinamicamente il risultato altrove nella pagina.

Come ho già detto, questo sarebbe preferibilmente fatto in jQuery o Javascript.

Grazie in anticipo.

Answer 1

Vorrei condividere la mia risposta che ho utilizzato nel mio progetto e funziona perfettamente.

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

Fonte: URL

Answer 2

Si potrebbe fare questo in jQuery (in quanto hai detto che preferiva), supponendo che si desidera che il conteggio dei caratteri visualizzati in un div con id = "personaggi":

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

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

UPDATE: jsFiddle (da Dreami)

UPDATE 2: Aggiornamento per includere il keydown per le lunghe pressioni.

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> 

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

Anche se è stato già risolto, sono interessato a condividere qualcosa che ho usato in uno dei miei progetti:

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

codice 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

Questa è la mia preferenza :

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

Poi jquery blocco

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

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