How to implement the method of obtaining dynamic remaining word count in textarea-HTML Tutorial-php.cn

How to implement the method of obtaining dynamic remaining word count in textarea

高洛峰

Release： 2017-02-18 15:58:08

Original

1379 people have browsed it

I encountered a case at work that I have never written about before. I spent half an afternoon trying to write it out. It was so frustrating and 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 the 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 text is deleted, 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:

<p 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>  
     <p class="limit_num_v2">  
         <h3>60</h3>  
    </p>  
 </p>

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

The above article on how to obtain the dynamic remaining word count in a textarea is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more related articles on how to obtain the dynamic remaining word count in textarea, please pay attention to the PHP Chinese website!