SJを使ってテキストボックスに入力された文字数をリアルタイムで監視する方法

今回は、SJを使ってテキストボックスの入力文字数をリアルタイムに監視する方法と、SJでテキストボックスの入力文字数をリアルタイムに監視するための注意事項についてお届けします。ここで実際のケースを見てみましょう。

必須

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

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

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

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

2. 解決策: com

position

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

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

りー

vueでの書き込み:

テンプレート: データ:

方法:

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

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