JavaScript を使用したテキストエリアの文字制限の適用

HTML フォームを使用する場合、ユーザーがテキストエリアに入力できる文字数を制限することが重要になることがよくあります。 要素は maxlength 属性を提供しますが、この機能を実装するのに常に最も便利な方法であるとは限りません。

JavaScript で maxlength をエミュレートする

maxlength 属性を手動で設定する代わりに、JavaScript を次のように設定できます。同じ効果を達成するために利用されます。 1 つのアプローチは、onkeypress や onkeyup などのイベント ハンドラーを使用してテキスト領域の値の長さを監視し、それに応じて入力を制限することです。ただし、この方法では、テキスト領域ごとにイベント処理コードを繰り返す必要があります。

自動長さの強制

文字制限を強制するプロセスを自動化するには、より洗練された解決策は、次の評価を行う JavaScript コードを使用することです。各テキスト領域要素の maxlength 属性を動的に設定します。このアプローチには次の手順が含まれます:

1. テキスト領域の識別: document.getElementsByTagName('TEXTAREA') を使用して、ドキュメント内のすべてのテキスト領域のリストを取得します。
2. maxlength 属性の確認: 各テキスト領域について、有効な値 (0 より大きい数値) を持つ maxlength 属性があるかどうかを確認します。
3. 匿名関数の作成: テキスト領域の長さを検証し、制限を超えた場合にアラートを表示する匿名関数を定義します。
4. イベント ハンドラーの割り当て: 匿名関数を onkeyup および onblur イベントとして割り当てます。テキスト領域のハンドラー。これらのイベントは、ユーザーがテキスト領域を入力または終了するたびにトリガーされ、長さの検証を促します。

質問で提供されているコード例は、このアプローチを示しており、ドキュメント内のすべてのテキスト領域に maxlength 属性を自動的に適用します。 。この手法を採用することで、開発者は繰り返しのイベント処理コードを必要とせずに文字制限を強制できます。