JavaScript を使用した HTML での TextArea の文字制限の強(qiáng)制

JavaScript は、HTML の maxlength 屬性によって提供される機(jī)能を拡張して、自動(dòng)的にテキスト領(lǐng)域に文字制限を課す。このアプローチは、手動(dòng)のイベント処理の必要性を排除することで、入力制限を強(qiáng)制する合理的かつ効率的な方法を提供します。

イベント ハンドラーを使用しない Maxlength の強(qiáng)制

制限する従來のアプローチテキストエリアの文字には、onkeypress や onkeyup などのイベント ハンドラーの使用が含まれます。ただし、複數(shù)のテキスト領(lǐng)域に制限を指定する必要がある場合、これは面倒になります。

JavaScript を使用すると、明示的なイベント処理をバイパスする、より洗練されたソリューションが可能になります。

<code class="javascript">window.onload = function() {
  // Retrieve all text areas on the page
  var txts = document.getElementsByTagName('TEXTAREA');

  // Loop through each text area
  for(var i = 0, l = txts.length; i < l; i++) {
    // If the textarea has a valid maxlength attribute (numeric value)
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
      // Define a function to handle maxlength enforcement
      var func = function() {
        var len = parseInt(this.getAttribute("maxlength"), 10);

        // Check if the input length exceeds the limit
        if(this.value.length > len) {
          // Alert the user and truncate the input
          alert('Maximum length exceeded: ' + len);
          this.value = this.value.substr(0, len);
          return false;
        }
      }

      // Assign the function to the onkeyup and onblur events
      txts[i].onkeyup = func;
      txts[i].onblur = func;
    }
  };
};</code>

実裝の詳細(xì)

• window.onload: ページが読み込まれたらスクリプトを?qū)g行します。
• getElementsByTagName: 上のすべてのテキスト領(lǐng)域要素を取得します。 page.
• Regex test: maxlength 屬性が有効な數(shù)値であるかどうかを確認(rèn)します。
• func: 入力が正しいかどうかを確認(rèn)する関數(shù)を定義します。長さが maxlength を超えているため、必要に応じて入力が切り捨てられます。
• イベント処理: 有効な maxlength 屬性を持つ各テキスト領(lǐng)域の onkeyup および onblur イベントに func 関數(shù)を割り當(dāng)てます。

利點(diǎn)

• 自動(dòng)適用: 各テキスト領(lǐng)域の手動(dòng)イベント処理を必要とせずに、文字制限が自動(dòng)的に課されます。
• 実裝の容易さ: 提供されたスクリプトにより、複數(shù)のテキスト領(lǐng)域に最大長を適用するプロセスが簡素化されます。
• モジュール式のアプローチ: 最大長の適用ロジックは、機(jī)能を使用すると、再利用やカスタマイズが簡単になります。

以上がイベントハンドラーを使用せずにHTMLのTextAreaに文字制限を適用するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。