使用 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;
    }
}
最後，我們將此回呼函數附加到文字區域的 keyup 和 Blur 事件。 
txts[i].onkeyup = func;
txts[i].onblur = func;
這種綜合方法提供了一種無縫解決方案，可以自動在網頁上的所有合格文字區域上施加最大長度，而無需重複的事件處理。