textareaの動的残り単語数を取得する方法-htmlチュートリアル-php.cn

textareaの動的残り単語数を取得する方法

php中世界最好的语言

リリース： 2018-01-23 10:22:42

オリジナル

1946 人が閲覧しました

今回は、テキストエリアの動的残り単語数を取得する方法と、テキストエリアの動的残り単語数を取得するためのノートについて説明します。実際のケースを見てみましょう。

仕事でこれまで書いたことのない事件に遭遇しました。それを書き出すのに午後の半分を費やしました。とても灰色の気分ですが、達成感もあります。もちろん、これは JS の専門家にとっては何でもありませんが、私自身の JS の能力にとっては小さな前進です。

ケースの紹介: 一部の Web サイトにはテキストエリアのテキストボックスがあり、入力すると、入力できる単語数の下にテキストプロンプトが表示されます。もちろん、ページには複数のテキストエリアがあるため、制御に単一の js ロジックを使用することはできず、小規模な方法でカプセル化する必要があります。もちろん、私のパッケージにはまだいくつかの欠陥がありますが、基本的な機能は達成されています。

最初に単一の textarea 実装ケースを紹介します

html 部分:

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

ログイン後にコピー

js 部分:

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

ログイン後にコピー

次に、同じページに複数の textarea 実装ケースを紹介します

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

ログイン後にコピー

もちろん、ここで必要な実際の単語数もカプセル化することができますfunction 内にありますが、カプセル化はしません。このように、文字を入力するとスパン内に残り文字数が自動的に表示されます。入力値が最大値に達すると、残り文字数は0と表示され、新たな内容を入力することはできません。テキストを削除すると、span は残りの単語数を動的に取得できます。

以下は他の人のコードです

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