js でテキスト ボックスに入力された単語の数を監視する方法 (詳細なチュートリアル)

以下に、テキスト ボックスに入力された単語数をリアルタイムで監視するためのサンプル コードを共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

要件: テキスト入力ボックス内の単語数をリアルタイムで監視し、制限します

1. 現在入力されている単語数をリアルタイムで監視し、onkeyup イベント メソッドを直接使用します。を入力し、入力ボックスに maxlength 属性を追加して長さを制限します。例:

<p>
 <textarea id="txt" maxlength="10"></textarea>
 <p><span id="txtNum">0</span>/10</p>
 </p>

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
 txtNum.textContent = txt.value.length;
 })

基本的な監視機能はこの時点で完了できます。既存の問題は、英語を入力する場合は正常ですが、中国語を入力する場合はピンインの長さに応じて監視される数値が変化することです。

2. 解決策:

compositionstart イベントは、テキストの入力前にトリガーされます (keydown イベントと同様ですが、このイベントは、表示されているいくつかの文字の入力前にのみ発生します)。文字を入力するには、一連のキーボード操作、音声認識、またはクリック入力方法の代替手段が必要になる場合があります)。

compositionend はテキスト入力に対応するイベントです。

これら 2 つの属性は、「スイッチ」に似ています。たとえば、中国語のピンインの入力を開始すると、スイッチがオンになり、完全なテキストまたはテキスト文字列が入力された後は、監視されている長さの値は変更されなくなります。入力するとスイッチがオフになり、モニタ値が取得されます。

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false; //定义关闭的开关
 txt.addEventListener("keyup", function(){
 if(sw == false){
  countTxt();
 }
 });
 txt.addEventListener("compositionstart", function(){
 sw = true;
 });
 txt.addEventListener("compositionend", function(){
 sw = false;
 countTxt();
 });
 function countTxt(){ //计数函数
 if(sw == false){ //只有开关关闭时，才赋值
  txtNum.textContent = txt.value.length;
 }
 }

vue で書かれました:

template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>

data:

textContent: '',
conterNum: 0,
chnIpt: false,

methods:

write() {
 let self = this;
 if (self.chnIpt == false) {
 self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}

上記は私が皆さんのためにまとめたものです。将来的にはみんなの役に立ちます。

関連記事:

axios を使用して fetch メソッドをカプセル化し、

JS の Map と ForEach の違いは何ですか?

vueでページ読み込みプログレスバーコンポーネントを実装する方法

JavaScriptを使用して日付範囲内で毎日異なる価格を取得する方法

vueで画像読み込みコンポーネントを実装する方法

なぜNode.jsなのか Webアプリケーション開発になるのでしょうか？

JavaScriptで最長共通部分列を実装する方法

以上がjs でテキスト ボックスに入力された単語の数を監視する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。