jQuery: Contar Caracteres de múltiples Cajas de Texto

En este consejo, le muestro cómo contar los caracteres de varios campos de entrada utilizando jQuery y cómo mostrar y mantenerse al día con el resultado.

El HTML

En nuestro sitio HTML hay 4 campos diferentes de entrada de tipo "input" con los nombres "a", "b", "c" y "d". Además, hemos colocado un texto con el que se debe mostrar el número actual de caracteres debajo de los campos.

<input name="a" value="" class="count">
<input name="b" value="" class="count">
<input name="c" value="" class="count">
<input name="d" value="">

<p>Caracteres utilizados: <span id="countdisplay">0</span></p>

Importante: Hemos asignado la clase "count" a todos los campos que deben ser contado. Estos son los campos de entrada "a", "b" y "c" en el ejemplo. Queremos excluir el campo de entrada "d" del conteo, es por eso que no hemos asignado la clase "count" a este campo.

Los caracteres usados deben mostrarse en el campo "countdisplay" más tarde. Hemos asignado el ID "countdisplay" a esta área, para que podamos cambiar el valor fácilmente. En nuestro código fuente HTML, hemos establecido el valor en 0, ya que todos nuestros campos no tienen contenido (valor=""). Si utilizamos valores iniciales para los campos de entrada, podemos ajustar naturalmente este número.

El Código JavaScript/jQuery

Vamos a llegar a nuestro código JavaScript respectivamente jQuery:

$(document).ready(function() {
  $(".count").keyup(function() {
    var c = 0;
 
    $.each($(".count"), function() {
      c += $(this).val().length;
    });
	 
    $("#countdisplay").text(c);
  });
});

Con el selector $(".count"), seleccionamos todos los campos con la clase "count", en otras palabras, todos los campos que deben contar. Asignamos la función para contar los campos y para mostrar el resultado al evento clave de estos campos.

Después de eso, establecemos nuestra variable de conteo "c" a 0. Luego, pasamos por todos los campos con la clase "count" usando $.each() y recuperamos la longitud de su contenido con .val(). Resumimos el resultado en la variable "c".

Al final, establecemos el contenido de "countdisplay" a "c", de modo que se muestra el número determinado de los caracteres. Si hemos inicializado los campos de entrada con los valores iniciales, también podemos llamar a la función de conteo inmediatamente después de cargar la página para determinar el valor actual.