jQuery: Contar Caracteres de múltiples Cajas de Texto
Consejo de Stefan Trost | 12/04/2022 a las 22:47
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.
Sobre el Autor
Puede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil
Temas Relacionados
MySQL: Saltos de Línea en MySQL
Consejo | 0 Comentarios
Renombrar Archivos en sus Nombres de Carpeta
Tutorial | 0 Comentarios
CSS: Cómo incluir CSS en HTML
Tutorial | 0 Comentarios
Reescribir Archivos de Texto con una Longitud de Línea Fija
Tutorial | 0 Comentarios
HTML: Preasignar un Formulario HTML con Datos
Tutorial | 0 Comentarios
Script Batch: Apagar Computadora Windows
Tutorial | 2 Comentarios
Determinar la Frecuencia de Palabras en un Texto
Tutorial | 0 Comentarios
Aviso Importante
Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.
Participar
Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.