テキストエリアの残りの単語数を動的に取得する方法

仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き上げました。とても達成感がありました。もちろん、これは JS の専門家にとっては何でもないことですが、私自身の JS 能力にとっては小さな前進です。

事例紹介: 一部の Web サイトにはテキストエリアテキストボックスがよくあります。入力すると、下にテキストプロンプトが表示され、あと何語入力できるかが表示されます。今日はこの機能を実装します。もちろん、ページには複数のテキストエリアがあるため、単一の js ロジックを使用してそれらを制御することはできないため、少しカプセル化する必要があります。もちろん、私のカプセル化にはまだいくつかの欠落がありますが、基本的な機能は実現されています。

まず、単一のテキストエリアの実装例を紹介しましょう。

HTML部分:

XML/HTML コードコンテンツをクリップボードにコピー

<テキストエリア id = "text_txt1" > </テキストエリア>
<スパン id = "num_txt1" >残り 600 文字</ span >

js部分:

JavaScriptコードコンテンツをクリップボードにコピー

$(関数() {
$( '#text_txt1' ).on( 'keyup' ,関数(){
var txtval = $( '#text_txt1' ).val().length;
コンソールログ(txtval);
var str = parseInt(600-txtval);
コンソールログ(str);
（文字列＞0）の場合{
$( '#num_txt1' ).html( '残りは' +str+ '文字を入力できます' );
}それ以外{
$( '#num_txt1' ).html( '残り0文字' );
$( '#text_txt1' ).val($( '#text_txt1' ).val().substring(0,600)); //これは、内部のテキストが 0 以下の場合、単語数を増やすことができず、600 語までしか増やせないことを意味します。
}
//console.log($('#num_txt').html(str));
});
})

次に、同じページに複数のテキストエリアを配置する実装例を紹介します。

JavaScriptコードコンテンツをクリップボードにコピー

関数changeLength(obj,num){
obj.on( 'keyup' ,関数(){
var txtval = obj.val().length;
//コンソール.log(txtval);
var str = parseInt(600-txtval);
// コンソールログ(str);
（文字列＞0）の場合{
num.html( '残りの入力' +str+ '単語数' );
}それ以外{
num.html( '残り0文字' );
obj.val(obj.val().substring(0, 600));
}
//console.log($('#num_txt').html(str));
});
}
$( function (){ // ここには4つあるので4回呼び出します
長さを変更します($( '#text_txt1' ),$( '#num_txt1' ));
長さを変更します($( '#text_txt2' ),$( '#num_txt2' ));
長さを変更します($( '#text_txt3' ),$( '#num_txt3' ));
長さを変更します($( '#text_txt4' ),$( '#num_txt4' ));
});

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

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

html:

XML/HTML コードコンテンツをクリップボードにコピー