ValidityState: tooLong 屬性

Baseline 已廣泛支援

此功能已成熟，並可在許多裝置和瀏覽器版本上執行。自 2018 年 12 月起，所有瀏覽器均支援此功能。

ValidityState 介面中只讀的 tooLong 屬性指示使用者編輯後的 <input> 或 <textarea> 元素的值是否超出了元素 maxlength 屬性設定的最大程式碼單元長度。

值

如果 ValidityState 不符合約束，則為 true 的布林值。

示例

字元計數過多的文字區域

以下示例檢查了一個 textarea 元素的有效性。使用 maxlength 屬性添加了一個約束，因此 textarea 期望的最大字元數為 10。如果 textarea 中的字元過多（如下所示），該元素將無法透過約束驗證，並將應用匹配 :invalid CSS 偽類的樣式。

在編輯 textarea 時，瀏覽器不會允許使用者新增會導致最大字元數約束驗證失敗的字元，因此一開始只允許刪除字元。換行符會被規範化，並在最大長度計算中計為一個字元。

css

textarea:invalid {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
textarea {
  width: 75%;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<pre id="log">Validation logged here...</pre>
<textarea name="story" id="userText" maxlength="10" rows="5">
It was a dark and


stormy night...
</textarea>

const userInput = document.getElementById("userText");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooLong) {
    log("Too many characters in the textarea.");
  } else {
    log("Input is valid…");
  }
});

規範

規範
HTML # dom-validitystate-toolong-dev

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年4月10日，由 MDN 貢獻者進行。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題