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

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

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

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

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

html 部分:

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

js 部分:

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

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

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

もちろん、ここで必要な実際の単語数もカプセル化することができます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 id="">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));   
    }   
}

これらの事例を読んでメソッドをマスターしたと思います。 php 中国語 Web サイトの記事のその他の関連トピックにも注目してください。

関連書籍:

HTML の基礎知識 CSS スタイル シートとスタイル属性の詳細な紹介

HTML におけるメタ タグの一般的な使用方法の紹介

HTMLa タグの href 属性は、次の内容を指定します。相対パスと絶対パス パスの使用方法

以上がtextareaの動的残り単語数を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。