How to get the dynamic number of remaining words in textarea

I encountered a case at work that I had never written about before. I spent half the afternoon working on it and finally wrote it out. I felt very accomplished! Of course, this is nothing for JS experts, but it is a small step forward for my own JS ability.

Case introduction: We often see that some websites have textarea text boxes. When you type, there will be text prompts below to show how many more words you can enter. Today we are going to implement this function. Of course, since there are several textareas on a page, it is not possible to use a single js logic to control them, so they have to be encapsulated a little. Of course, there are still some omissions in my encapsulation, but the basic functions are achieved.

First, let's introduce a single textarea implementation case

HTML part:

js part:

Then introduce the implementation cases of multiple textareas on the same page

Of course, the number of words actually required here can also be encapsulated inside the function, but I won’t do that. In this way, when you enter text, the remaining number of words will be automatically displayed inside the span. When the input value reaches the maximum value, the remaining number of words will be displayed as 0, and new content cannot be filled in. When deleting text, span can dynamically obtain the number of remaining words.

Below is the code of others. This time, I also borrowed some of their writing methods.

html:

js:

The above article on how to obtain the dynamic number of remaining words in textarea is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.