JavaScript を使用してテキスト領域の最大テキスト長を動的に強制する方法

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 < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {

対象となるテキスト領域ごとに、最大長を検証するコールバック関数を定義します。この関数は次のことを行います:

1. maxlength 属性の値を整数として取得します
2. テキスト領域の値の現在の長さが maxlength を超えているかどうかを確認します
3. 超えている場合、警告メッセージを表示し、値を許可される最大長まで切り詰めます

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

最後に、このコールバック関数をテキスト領域の keyup イベントとブラー イベントの両方に付加します。

txts[i].onkeyup = func;
txts[i].onblur = func;

この包括的なアプローチは、繰り返しのイベント処理を必要とせずに、Web ページ上のすべての対象テキスト領域に最大長を自動的に課すシームレスなソリューションを提供します。

以上がJavaScript を使用してテキスト領域の最大テキスト長を動的に強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。