ValidityState: tooLong 属性

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上运行。它自以下日期起在各浏览器中可用 2018 年 12 月.

ValidityState 接口的只读tooLong 属性指示 <input> 或 <textarea> 的值（在用户编辑后）是否超过元素的 maxlength 属性所建立的最大代码单元长度。

值

一个布尔值，如果ValidityState不符合约束条件，则为true。

示例

字符数过长的文本区域

以下示例检查 文本区域元素 的有效性。已使用 maxlength 属性 添加了约束，因此文本区域期望最多 10 个字符。如果文本区域中的字符过多（如下所示为真），则元素将无法通过约束验证，并且匹配 :invalid CSS 伪类的样式将被应用。

在编辑文本区域时，浏览器将不允许用户添加会导致最大字符数约束验证失败的字符，因此首先只允许删除字符。换行符会被规范化，并在最大长度计算中算作单个字符。

css
textarea:invalid {
  outline: red solid 3px;
}
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>
js
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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅