Example tutorial on real-time updating of word count in js input box
This article mainly introduces the real-time statistical update of the number of words in the input box JavaScript, which has a certain reference value. Interested friends can refer to it
In front-end development, many In this case, the input content needs to be verified. The real-time statistics function, for fixed-length input, allows users to clarify input boundaries in real time and arrange content reasonably.
Real-time statistical update of word count
The following will take [Message Content] as an example to design and implement the real-time statistical update function of word count in the input box.
The project structure is as follows:
message
message.css
message.js
message.tpl
1. Define web page elements in the message.tpl file
//移动端微信公众号开发 <p class="weui-cellbd"> <textarea id="content" class="weui-textarea" placeholder="新消息内容" rows="3"> </textarea> <p class="weui-textarea-counter"> <span class="contentcount">0</span>/200 </p> </p> //web端业务开发 <p class="modal-body" style="box-sizing: border-box;"> <form id="newtaskform" class="form-horizontal"></form> </p>
2. In the message.js file Binding event to count input characters
//移动端 tooltips提示形式 $('#content').bind('input propertychange', function () { var fizeNum = $(this).val().length; if (fizeNum > 200) { var char = $(this).val(); char = char.substr(0, 200); $(this).val(char); fizeNum = 200; tooltipsShow('消息内容不能超过200字'); } $(this).parent().find('.contentcount').text(fizeNum); }); //web网页span提示形式 FileName = '<p class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息内容</label>'+ '<p class="col-sm-9 input-container "><textarea id="msgcontent" name="text" rows="8" style="width:100%;padding-right:20px"></textarea>' + '<p class="counter" style="float:right;">' + '<span id="texttips" style="display: none; color: #ff0000;">消息内容超出最大限制</span><span class="contentcount">0</span>/200</p>' + '</p></p>'; $("#newtaskform").append(FileName); $('#msgcontent').bind('input propertychange', function () { var fizeNum = $(this).val().length; if (fizeNum > 200) { var char = $(this).val(); char = char.substr(0, 200); $(this).val(char); fizeNum = 200; $("#texttips").show(); }else{ $("#texttips").hide(); } $(this).parent().find('.contentcount').text(fizeNum); });
The above is the detailed content of Example tutorial on real-time updating of word count in js input box. 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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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

Recently, many Win11 users have encountered the problem that the input experience dialog box always flickers and cannot be turned off. This is actually caused by the default system services and components of Win11. We need to disable the relevant services first, and then disable the input experience service. Solved, let’s try it out together. How to turn off the input experience in win11: First step, right-click the start menu and open "Task Manager". Second step, find the three processes "CTF Loader", "MicrosoftIME" and "Service Host: Textinput Management Service" in order, right-click "End Task" "The third step, open the start menu, search and open "Services" at the top. The fourth step, find "Textinp" in it
![Windows input encounters hang or high memory usage [Fix]](https://img.php.cn/upload/article/000/887/227/170835409686241.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
The Windows input experience is a key system service responsible for processing user input from various human interface devices. It starts automatically at system startup and runs in the background. However, sometimes this service may automatically hang or occupy too much memory, resulting in reduced system performance. Therefore, it is crucial to monitor and manage this process in a timely manner to ensure system efficiency and stability. In this article, we will share how to fix issues where the Windows input experience hangs or causes high memory usage. The Windows Input Experience Service does not have a user interface, but it is closely related to handling basic system tasks and functions related to input devices. Its role is to help the Windows system understand every input entered by the user.

When using Win10 Notepad to input text, many friends want to check how much text they have input. So how to check it? In fact, you can see the number of words by just opening the text properties and checking the byte count. How to check the word count in Notepad in win10: 1. First, after editing the content in Notepad, save it. 2. Then right-click the notepad you saved and select. 3. We see that it is 8 bytes, because the size of each Chinese character is 2 bytes. 4. After we see the total bytes, just divide it by 2. For example, 984 bytes, divided by 2 is 492 words. 5. But it should be noted that each number such as 123 only occupies one byte, and each English word only occupies one byte.

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

With the continuous development of Internet technology, real-time video streaming has become an important application in the Internet field. To achieve real-time video streaming, the key technologies include WebSocket and Java. This article will introduce how to use WebSocket and Java to implement real-time video streaming playback, and provide relevant code examples. 1. What is WebSocket? WebSocket is a protocol for full-duplex communication on a single TCP connection. It is used on the Web

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

Word is one of the most popular office software. Sometimes there are strict word count requirements for the formatting of documents. For example, the number of words in a title should not be too long. A title that is too long is not eye-catching enough. There are also certain paragraphs that need to be put into some software systems. Too many or too few words will affect the beauty of the layout. If you count the words one by one, it will look dull and a waste of time. You may even count the words incorrectly. How do you check the number of words in Word? Let’s learn several ways to check word count in Word. How to check word count in word? How to check the word count in Word The first method is to use Word word count to check 1. Select the "Review" tab and click "Word Count" to count the number of pages, words, characters, paragraphs, lines, etc. of the document. information. Hold

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
