How to obtain the dynamic remaining word count of textarea-HTML Tutorial-php.cn

How to obtain the dynamic remaining word count of textarea

php中世界最好的语言

Release： 2018-01-23 10:22:42

Original

1833 people have browsed it

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>

Copy after login

js part:

$(function(){   
   $(&#39;#text_txt1&#39;).on(&#39;keyup&#39;,function(){   
       var txtval = $(&#39;#text_txt1&#39;).val().length;   
       console.log(txtval);   
      var str = parseInt(600-txtval);   
      console.log(str);   
        if(str > 0 ){   
          $(&#39;#num_txt1&#39;).html(&#39;剩余可输入&#39;+str+&#39;字&#39;);   
      }else{   
          $(&#39;#num_txt1&#39;).html(&#39;剩余可输入0字&#39;);   
          $(&#39;#text_txt1&#39;).val($(&#39;#text_txt1&#39;).val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候，那么字数不能再增加，只能是600个字   
        }   
        //console.log($(&#39;#num_txt&#39;).html(str));   
    });   
})

Copy after login

Then introduce multiple textarea implementation cases on the same page

function changeLength(obj,num){   
    obj.on(&#39;keyup&#39;,function(){   
    var txtval = obj.val().length;   
        //console.log(txtval);   
        var str = parseInt(600-txtval);   
        //console.log(str);   
        if(str > 0 ){   
            num.html(&#39;剩余可输入&#39;+str+&#39;字&#39;);   
        }else {   
            num.html(&#39;剩余可输入0字&#39;);   
            obj.val(obj.val().substring(0, 600));   
        }   
        //console.log($(&#39;#num_txt&#39;).html(str));   
    });   
}   
$(function(){ //我这里有四个，所以调用4次   
    changeLength($(&#39;#text_txt1&#39;),$(&#39;#num_txt1&#39;));   
    changeLength($(&#39;#text_txt2&#39;),$(&#39;#num_txt2&#39;));   
    changeLength($(&#39;#text_txt3&#39;),$(&#39;#num_txt3&#39;));   
    changeLength($(&#39;#text_txt4&#39;),$(&#39;#num_txt4&#39;));   
});

Copy after login

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>

Copy after login

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));   
    }   
}

Copy after login

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!