Method of acquiring dynamic residual words in textarea based on JS _javascript skills

Case Description: We often see some sites have textarea text box, when you enter, the following text prompts can also input how many words, today is to achieve this function. Of course, because a page has several textarea, so the use of a single JS logic control is not possible, a small package. Of course my package still has gaps, but the basic function is realized.

First, we introduce a single TEXTAREA implementation case

HTML section:

<textarea id= "Text_txt1" ></textarea>

JS section:

$ (function () {
$ (' #text_txt1 '). On (' KeyUp ', function () {
var txtval = $ (' #text_txt1 '). val () length;
Console.log (txtval);
var str = parseint (600-txtval);
Console.log (str);
if (str > 0) {
$ (' #num_txt1 '). HTML (' left to enter ' +str+ ' word);
} else{
$ (' #num_txt1 '). HTML (' remaining can be entered in 0 words ');
$ (' #text_txt1 '). Val ($ (' #text_txt1 '). Val (). substring (0,600)); This means that when the inside text is less than or equal to 0, then the words can not be increased, only 600 words
}
//console.log (' #num_txt '). html (str);

Then introduce multiple textarea implementation cases on the same page

function Changelength (obj,num) {
obj.on (' KeyUp ', function () {
var txtval = Obj.val (). length;
Console.log (txtval);
var str = parseint (600-txtval);
Console.log (str);
if (str > 0) {
num.html (' remainder can be entered ' +str+ ');
} else {
num.html (' remaining can enter 0 words ');
Obj.val (Obj.val (). substring (0));
Console.log ($ (' #num_txt '). HTML (str));}
$ (function () {//I have four here, so call 4 times
changelength (' #text_txt1 '), $ (' #num_txt1 '));
Changelength (' #text_txt2 '), $ (' #num_txt2 '));
Changelength (' #text_txt3 '), $ (' #num_txt3 '));
Changelength (' #text_txt4 '), $ (' #num_txt4 '));

Of course, the actual number of words required can also be encapsulated within the function, but I do not package. This is achieved when the input text, span will automatically display the remaining words, when the input value to the highest value, display the remaining words 0, and can not fill in the new content. When text is deleted, span can dynamically get the remaining words.

Below the next person's code, this time how much also borrowed from other people's writing

Html:

<div class= "Family_v2" >
<p class= "NICKNAME_V2" > Introduction:</p> <textarea id=
"content" Name= " Sign "style=" height:60px;overflow-y: hidden; "
Onkeyup= "Changelength (this,60)" class= "Nicknamebox_v2 brief_box_v2" >
</textarea>
<div class= " Limit_num_v2 ">
 
 

Js:

Verify textarea length
function changelength (OBJ,LG) {
var len = $ (obj). val ();
$ (obj). Next (). Find ("H3"). Text (lg-len.length);
if (LEN.LENGTH>=LG) {
$ (obj). Next (). Find ("H3"). Text (0);
$ (obj). val (len.substring (0,LG));
}

The above is a small set for you to introduce the implementation of TEXTAREA based on JS dynamic residual word method, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!