Contar y mostrar el número de caracteres en un cuadro de texto usando Javascript

Question

Estoy trabajando en un proyecto que requiere que cuente el número de caracteres ingresados ​​en un cuadro de texto y muestre dinámicamente el resultado en otra parte de la página.

Como dije, esto se haría preferentemente en jQuery o Javascript.

Gracias de antemano.

Answer 1

Me gustaría compartir mi respuesta que utilicé en mi proyecto y está funcionando bien.

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

Fuente: URL

Answer 2

Se podría hacer esto en jQuery (ya que dijo que prefería ella), suponiendo que se desea que el contador de caracteres que se muestra en un div con id = "caracteres":

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

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

ACTUALIZACIÓN: jsFiddle (por Dreami)

ACTUALIZACIÓN 2: actualización para incluir la tecla para pulsaciones largas.

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> 

Fuente (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. 

Llanura Javascript.

Answer 5

pesar de que ha sido ya resuelto, me interesa compartir algo que he utilizado en uno de mis proyectos:

<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 código:

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

Ésta es mi preferencia :

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

Entonces jQuery bloque

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

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