简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Javascript code to implement word count

怪我咯
Release： 2017-07-04 15:05:55
Original
2179 people have browsed it

Nowadays, popular microblogging websites such as Twitter have a good user experience. When entering text in the text box, the entered characters will be automatically counted and the characters that the user can still enter will be displayed. After the limit of 140 In a microblog with a single word, such small tips can greatly enhance the user experience.

Word count function, the principle is to add onKeyupevent to textarea. The event reads the textarea content and obtains the length, and assigns it to the text node that counts the word count, here One thing to note is that adding onKeypress and onKeydown events can also achieve the effect, but they have some shortcomings and may cause misunderstandings in some cases. I have tried them both, but I feel that they only Using an onKeyup event is the wisest choice. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<script>
function cal_words(){
  var length = document.getElementById("test").value.length;
  document.getElementById("num").innerHTML = length;
}
</script>
</head>

<body>
<p class="reply">
 <textarea id="test" onKeyUp="cal_words()"></textarea>
 <p>字数：<span id="num">0</span></p>
</p>
</body>
</html>
Copy after login

The above is the detailed content of Javascript code to implement word count. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
javascript js code
source：php.cn
Previous article：The function of real-time counting of words in JavaScript input box Next article：js implementation of multi-line text box counting remaining words function code example
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Stream data from OpenAI's API using AJAX, PHP, and server-sent events How can I use Server Sent Events (SSE) to stream data from the above API to a browser clie...
From 2023-11-11 12:03:23
0
1
497
Uncaught TypeError: Cannot set property of undefined (set 'innerHTML') I'm trying to create a webpage using php, on an element of class "Continuous TextBox&...
From 2023-11-08 21:06:09
0
1
278
How to get the RGB value of CSS/HTML named color in JavaScript I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...
From 2023-11-06 09:05:50
0
2
210
Why do so many JavaScript scripts append random numbers to things? collision? I've been learning JavaScript lately and have seen many examples of using Math.rand() to a...
From 2023-11-04 20:00:04
0
2
296
Identify performance limitations in JavaScript I'm trying to find the bottleneck in my Javascript. Basically I'm developing a chrome exte...
From 2023-10-31 20:47:17
0
1
229
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！