How to obtain the dynamic remaining word count of textarea

This time I will show you how to obtain the dynamic remaining word count of textarea, and what are the precautions for obtaining the dynamic remaining word count of textarea. The following is a practical case, let's take a look.

I encountered a case at work that I have never written about before. I spent half an afternoon trying to write it out. It feels so gray but also feels a sense of accomplishment! Of course, this is nothing to a js expert, 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 enter, there is a text prompt below how many words you can enter. Today we are going to implement this function. Of course, since a page has several textareas, it is not possible to use a single js logic for control, and it must be encapsulated in a small way. Of course, there are still some flaws in my package, but the basic functions are achieved.

First introduce a single textarea implementation case

html part:

<textarea id="text_txt1"></textarea>  
<span id ="num_txt1">剩余可输入600字</span>

js part:

$(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('剩余可输入'+str+'字');   
      }else{   
          $('#num_txt1').html('剩余可输入0字');   
          $('#text_txt1').val($('#text_txt1').val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候，那么字数不能再增加，只能是600个字   
        }   
        //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('剩余可输入'+str+'字');   
        }else {   
            num.html('剩余可输入0字');   
            obj.val(obj.val().substring(0, 600));   
        }   
        //console.log($('#num_txt').html(str));   
    });   
}   
$(function(){ //我这里有四个，所以调用4次   
    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 here can also be encapsulated inside the function, but I will not encapsulate it. In this way, when text is entered, the remaining word count will be automatically displayed inside the span. When the input value reaches the maximum value, the remaining word count will be displayed as 0, and new content cannot be filled in. When deletes text, span can dynamically obtain the remaining number of words.

The following is other people’s code. This time I also borrowed some other people’s writing methods

html:

<div class="family_v2">  
    <p class="nickname_v2">简介：</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:

//验证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));   
    }   
}

I believe that I have seen these cases. You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Basic knowledge of HTML. Detailed introduction to css style sheets and style attributes

of HTML Introduction to common usage of meta tag

The href attribute of HTMLa tag specifies relative path and absolute path usage

The above is the detailed content of How to obtain the dynamic remaining word count of textarea. For more information, please follow other related articles on the PHP Chinese website!