En este artículo, aprenderemos cómo contar palabras en tiempo real usando jQuery. Tenemos un campo de entrada, y cuando escribimos, obtenemos la cantidad de palabras en la entrada en tiempo real.
Enfoque: Primero, seleccionamos el campo de entrada y almacenamos su valor en una variable. Llamamos a una función llamada wordCount() cuando se suelta una tecla del teclado que cuenta el número de palabras en el campo de entrada. Para contar la cantidad de palabras en el campo de entrada, dividimos el valor por espacio usando el método jQuery split() y luego contamos la cantidad de palabras.
Fragmento de código: La siguiente es la implementación del método wordCount().
function wordCount( field ) {
var number = 0;
// Split the value of input by
// space to count the words
var matches = $(field).val().split(" ");
// Count number of words
number = matches.filter(function (word) {
return word.length > 0;
}).length;
// final number of words
$("#final").val(number);
}
Código HTML: a continuación se muestra la implementación completa del enfoque anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
body {
color: green;
font-size: 30px;
}
input {
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<input type="text" id="inp" />
<input type="text" id="final" disabled />
<script>
function wordCount(field) {
var number = 0;
// Split the value of input by
// space to count the words
var matches = $(field).val().split(" ");
// Count number of words
number = matches.filter(function (word) {
return word.length > 0;
}).length;
// Final number of words
$("#final").val(number);
}
$(function () {
$("input[type='text']:not(:disabled)")
.each(function () {
var input = "#" + this.id;
// Count words when keyboard
// key is released
$(this).keyup(function () {
wordCount(input);
});
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sachinchhipa44 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA