テキストボックスに入力された単語数をリアルタイム監視する詳細説明

この記事では、主にテキスト ボックスに入力された単語数をリアルタイムで監視するためのコード例を紹介します。これは参考になるものであり、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

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

の書き方:

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

関連推奨事項:

HTML5 中国語テキスト ボックス入力によるコンテンツ プロンプトの削除

入力テキスト ボックス入力の禁止実装属性

js各種検証テキストボックス入力形式(正規表現)_フォーム特殊効果

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