极客教程如何使用jQuery实时计算单词
在这篇文章中，我们将学习如何使用jQuery来实时计算单词。我们有一个输入字段，当我们输入时，我们会实时得到输入的字数。
方法：首先，我们选择输入字段并将其值存入一个变量。当键盘按键被释放时，我们调用一个名为wordCount()的函数，计算输入栏的字数。为了计算输入框中的字数，我们使用jQuery split()方法将数值按空格分割，然后计算字数。
代码片段：以下是方法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);
}
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>