ValidityState: thuộc tính tooLong
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
Thuộc tính chỉ đọc tooLong của giao diện ValidityState chỉ ra liệu giá trị của <input> hoặc <textarea>, sau khi đã được người dùng chỉnh sửa, có vượt quá độ dài đơn vị mã tối đa được thiết lập bởi thuộc tính maxlength của phần tử hay không.
Giá trị
Một giá trị boolean là true nếu ValidityState không tuân theo các ràng buộc.
Ví dụ
Textarea có số ký tự quá dài
Ví dụ sau kiểm tra tính hợp lệ của phần tử textarea.
Một ràng buộc đã được thêm bằng cách sử dụng thuộc tính maxlength để textarea kỳ vọng tối đa 10 ký tự.
Nếu có quá nhiều ký tự trong textarea (như bên dưới), phần tử thất bại xác thực ràng buộc, và các kiểu khớp với lớp giả CSS :invalid được áp dụng.
Khi chỉnh sửa textarea, trình duyệt sẽ không cho phép người dùng thêm các ký tự sẽ th��t bại xác thực ràng buộc về số ký tự tối đa, vì vậy ban đầu, chỉ được phép x��a ký tự. Ký tự xu��ng dòng được chuẩn hóa và tính là một ký tự đơn trong tính toán ��ộ dài tối đa.
textarea:invalid {
outline: red solid 3px;
}
<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…");
}
});
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-validitystate-toolong-dev |