textareaで動的な残り単語数を取得するメソッドの実装方法-htmlチュートリアル-php.cn

textareaで動的な残り単語数を取得するメソッドの実装方法

高洛峰

リリース： 2017-02-18 15:58:08

オリジナル

1379 人が閲覧しました

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

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

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

html 部分:

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

ログイン後にコピー

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

以下は他の人のコードです、今回は他の人の書き方も拝借しました

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>

ログイン後にコピー

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

ログイン後にコピー

textareaで動的残り単語数を実現する方法に関する上記の記事は、編集者が共有しました。すべての内容を紹介しました。参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

textarea で動的な残りの単語数を取得する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。