如何使用 JavaScript 強制執行 HTML 文字區域的最大長度？

使用JavaScript 對HTML 文字區域強制最大長度

如何對 施加最大長度使用純Java 的HTML 元素而不訴諸jQuery？當您想要控制使用者輸入量並防止文字溢出時，就會出現這個問題。

一種方法是在每個文字區域中使用onkeypress 和onkeyup 屬性處理按鍵事件：

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"></textarea>

<script>
  function imposeMaxLength(event, object, maxLength) {
    return (object.value.length <= maxLength) || (event.keyCode == 8 || event.keyCode == 46 || (event.keyCode >= 35 && event.keyCode <= 40));
  }
</script>

但是，手動將這些屬性新增至每個文字區域可能會變得乏味。這是自動執行該過程的另一種方法：

window.onload = function() {
  var txts = document.getElementsByTagName('TEXTAREA');

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

此腳本在頁面載入時初始化並迭代所有 。文檔中的元素。對於每個具有數字 maxlength 屬性的文字區域，它定義一個函數來檢查文字是否超出限制。如果是這樣，它會警告使用者並將輸入截斷為最大長度。透過將此函數指派給 onkeyup 和 onblur 事件，將自動套用最大長度限制，無需手動附加事件處理程序。

以上是如何使用 JavaScript 強制執行 HTML 文字區域的最大長度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！