


How to monitor the number of words entered in a text box in js (detailed tutorial)
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>
var txt = document.getElementById("txt"); var txtNum = document.getElementById("txtNum"); txt.addEventListener("keyup", function(){ txtNum.textContent = txt.value.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; } }
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>
data:
textContent: '', conterNum: 0, chnIpt: false,
methods:
write() { let self = this; if (self.chnIpt == false) { self.conterNum = self.textContent.length; } }, importStart() { this.chnIpt = true; }, importEnd() { this.chnIpt = false; this.write(); }
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



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 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

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 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 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? 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 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

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.
