JavaScript を使用して HTML のテキスト領域に最大長を設定するための包括的なガイド

Web 開発では、多くの場合、テキストに入力されるテキストの最大長を制御する必要があります。地域。このシナリオでは、複数のテキスト領域に maxlength 属性を自動的に適用する必要があります。以前の解決策には各テキスト領域の手動イベント処理が含まれていましたが、コードの繰り返しの必要性を排除する代替アプローチを検討します。

解決策:

この解決策の鍵は JavaScript の機能にあります。ページ内のすべてのテキスト領域をスキャンし、適切なテキスト領域にイベント リスナーを動的に追加します。 onload イベントを利用することで、読み込み時にテキスト領域を含むページ全体のコンテンツにアクセスできるようになります。

window.onload = function() {

これで、ドキュメントをトラバースできるようになります。 TEXTAREA タグを持つすべての要素を検索:

var txts = document.getElementsByTagName('TEXTAREA');

次に、各テキスト領域を反復処理して、有効な maxlength 属性があるかどうかを確認します。 maxlength 値が数値であることを確認するために正規表現を使用していることに注意してください。

for(var i = 0, l = txts.length; i 
該当するテキスト領域ごとに、最大長を検証するコールバック関数を定義します。この関数は次のことを行います:
maxlength 属性の値を整数として取得します
テキスト領域の値の現在の長さが maxlength を超えているかどうかを確認します
超えた場合、警告メッセージを表示し、値を許可される最大長に切り詰めます
var func = function() {
    var len = parseInt(this.getAttribute("maxlength"), 10);

    if(this.value.length > len) {
        alert('Maximum length exceeded: '   len);
        this.value = this.value.substr(0, len);
        return false;
    }
}
最後に、このコールバック関数をテキスト領域のキーアップ イベントとブラー イベントの両方にアタッチします。
txts[i].onkeyup = func;
txts[i].onblur = func;
この包括的なアプローチは、繰り返しのイベント処理を必要とせずに、Web ページ上のすべての対象テキスト領域に最大長を自動的に課すシームレスなソリューションを提供します。