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:

XML/HTML CodeCopy content to clipboard

< textarea id = "text_txt1" > </ textarea >
< span id = "num_txt1" > 600 characters remaining </ span >

js part:

JavaScript CodeCopy content to clipboard

$( 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( 'The rest can be entered' +str+ 'characters' );
} else {
$( '#num_txt1' ).html( '0 characters remaining' );
$( '#text_txt1' ).val($( '#text_txt1' ).val().substring(0,600)); //This means that when the text inside is less than or equal to 0, the number of words cannot be increased and can only be 600 words
}
//console.log($('#num_txt').html(str));
});
})

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

JavaScript CodeCopy content to clipboard

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( 'remaining input' +str+ 'words' );
} else {
num.html( '0 characters remaining' );
obj.val(obj.val().substring(0, 600));
}
//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 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:

XML/HTML CodeCopy content to clipboard

< 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" >
< h3 > 60 </ h3 >
</ div >
</ div >

js:

JavaScript CodeCopy content to clipboard

//Verify the length of the textarea
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 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.

<<: Example of fork and mutex lock process in Linux multithreading

>>: How to create dynamic QML objects in JavaScript