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 上查看此页面 • 报告此内容的某个问题