Home Web Front-end JS Tutorial How to monitor the number of words entered in a text box in js (detailed tutorial)

How to monitor the number of words entered in a text box in js (detailed tutorial)

Jun 11, 2018 pm 03:04 PM
real time monitoring text box

Below I will share with you an example code for real-time monitoring of the number of words entered in a text box. It has a good reference value and I hope it will be helpful to everyone.

Requirement: Monitor the number of words in the text input box in real time and limit it

##1. Monitor the current input word count in real time, directly use the onkeyup event method, and add the maxlength attribute to the input box to limit the length. For example:

<p>
 <textarea id="txt" maxlength="10"></textarea>
 <p><span id="txtNum">0</span>/10</p>
 </p>
Copy after login
var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
 txtNum.textContent = txt.value.length;
 })
Copy after login

At this point, the basic monitoring function can be completed. The existing problem is: when inputting English, it is normal, but when inputting Chinese, the monitored numbers will change with the pinyin length.

2. Solution:

The compositionstart event is triggered before the input of a piece of text (similar to the keydown event, but this event only occurs after several before the input of visible characters, and the input of these visible characters may require a series of keyboard operations, speech recognition, or click input method alternatives).

compositionend is an event corresponding to a piece of text input.

These two attributes are somewhat similar to a "switch". For example, when the Chinese pinyin input is started, the switch is turned on, and the monitored length value is no longer changed. After a complete text or a string of text is input, the switch is turned off. Get the monitored value length.

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false; //定义关闭的开关
 txt.addEventListener("keyup", function(){
 if(sw == false){
  countTxt();
 }
 });
 txt.addEventListener("compositionstart", function(){
 sw = true;
 });
 txt.addEventListener("compositionend", function(){
 sw = false;
 countTxt();
 });
 function countTxt(){ //计数函数
 if(sw == false){ //只有开关关闭时,才赋值
  txtNum.textContent = txt.value.length;
 }
 }
Copy after login

is written in vue:

template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>
Copy after login

data:

textContent: &#39;&#39;,
conterNum: 0,
chnIpt: false,
Copy after login

methods:

write() {
 let self = this;
 if (self.chnIpt == false) {
 self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}
Copy after login

The above is what I compiled for everyone. I hope it will be useful to you in the future. Everyone is helpful.

Related articles:

Use axios to encapsulate the fetch method and call

What are the differences between Map and ForEach in JS?

How to implement the page loading progress bar component in vue

How to use javascript to obtain different prices every day within the date range

How to implement the image loading component in vue

Why will Node.js become a web application development?

How to implement the longest common subsequence in javascript

The above is the detailed content of How to monitor the number of words entered in a text box in js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set a picture as the background in OneNote How to set a picture as the background in OneNote May 14, 2023 am 11:16 AM

Onenote is one of the best note-taking tools offered by Microsoft. Combined with Outlook and MSTeams, Onenote can be a powerful combination for increasing productivity at work and in personal creative productivity. We have to take notes in a different format, which may be more than just writing things down. Sometimes we need to copy images from different sources and do some editing in our daily work. Images pasted on Onenote can go a long way if you know how to apply the changes. Have you ever encountered a problem when using Onenote that images pasted on Onenote cannot allow you to work easily? This article will look at using images effectively on Onenote. we can

How to hide text until clicked in Powerpoint How to hide text until clicked in Powerpoint Apr 14, 2023 pm 04:40 PM

How to hide text before any click in PowerPoint If you want text to appear when you click anywhere on a PowerPoint slide, setting it up is quick and easy. To hide text before clicking any button in PowerPoint: Open your PowerPoint document and click the Insert menu. Click on New Slide. Choose Blank or one of the other presets. Still in the Insert menu, click Text Box. Drag a text box onto the slide. Click the text box and enter your

Use the Gin framework to implement real-time monitoring and alarm functions Use the Gin framework to implement real-time monitoring and alarm functions Jun 22, 2023 pm 06:22 PM

Gin is a lightweight Web framework that uses the coroutine and high-speed routing processing capabilities of the Go language to quickly develop high-performance Web applications. In this article, we will explore how to use the Gin framework to implement real-time monitoring and alarm functions. Monitoring and alarming are an important part of modern software development. In a large system, there may be thousands of processes, hundreds of servers, and millions of users. The amount of data generated by these systems is often staggering, so there is a need for a system that can quickly process this data and provide timely warnings.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to make a calendar in Word How to make a calendar in Word Apr 25, 2023 pm 02:34 PM

How to Make a Calendar in Word Using Tables If you want to create a calendar that fits your specifications exactly, you can do everything from scratch using tables in Word. This allows you to design the exact layout you want for your calendar. Create a calendar using tables in Word: Open a new Word document. Press Enter a few times to move the cursor down the page. Click the Insert menu. In the ribbon, click the table icon. Click and hold the upper left square and drag out a 7×6 table. Write the day of the week on the first line. Use another calendar as a reference to fill in the days of the month. Highlight any date outside the current month. In the main menu, click the text color icon and select Gray. For the current month, start with

How to monitor the number of MySQL connections in real time? How to monitor the number of MySQL connections in real time? Jun 29, 2023 am 08:31 AM

How to monitor the number of MySQL connections in real time? MySQL is a widely used relational database management system for storing and managing large amounts of data. In the case of high concurrency, the number of MySQL connections is one of the key indicators and can directly affect the performance and stability of the system. Therefore, real-time monitoring of the number of MySQL connections is essential for system operation and maintenance and performance optimization. This article will introduce some commonly used methods and tools to monitor the number of MySQL connections in real time and corresponding solutions. MySQL’s built-in state variable My

How to configure your CentOS system to protect against malware and viruses How to configure your CentOS system to protect against malware and viruses Jul 05, 2023 am 10:25 AM

How to configure CentOS systems to prevent malware and virus intrusions Introduction: In today's digital era, computers and the Internet have become an indispensable part of people's daily lives. However, with the popularization of the Internet and the continuous advancement of computer technology, network security problems have become increasingly serious. The intrusion of malware and viruses poses a great threat to the security of our personal information and the stability of our computer systems. In order to better protect our computer systems from malware and viruses, this article will introduce how to configure Cent

What are the types of html text boxes? What are the types of html text boxes? Oct 12, 2023 pm 05:38 PM

HTML text box types include single line text box, password text box, number text box, date text box, time text box, file upload text box, multi-line text box, etc. Detailed introduction: 1. The single-line text box is the most common type of text box, used to accept single-line text input. The user can enter any text in the text box, such as user name, password, email address, etc.; 2. The password text box is used To accept password input, when the user enters the password, the content in the text box will be hidden to protect the user's privacy; 3. Numeric text box, etc.

See all articles