ValidityState: tooLong-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft tooLong der Schnittstelle ValidityState gibt an, ob der Wert eines <input>- oder <textarea>-Elements, nachdem er vom Benutzer bearbeitet wurde, die durch das Attribut maxlength festgelegte maximale Länge in Codeeinheiten überschreitet.
Wert
Ein boolescher Wert, der true ist, wenn der Wert die Beschränkungen nicht erfüllt.
Beispiele
Textarea mit zu vielen Zeichen
Das folgende Beispiel prüft die Gültigkeit eines textarea-Elements.
Mit dem Attribut maxlength wurde die Länge auf maximal 10 Zeichen beschränkt.
Wenn das Textarea-Element zu viele Zeichen enthält (wie unten), besteht es die Validierung nicht, und die Formatierungen für die CSS-Pseudoklasse :invalid werden angewendet.
Beim Bearbeiten des Textarea-Elements lässt der Browser keine weiteren Zeichen zu, die die maximale Zeichenzahl überschreiten würden. Daher können zunächst nur Zeichen gelöscht werden. Zeilenumbruchzeichen werden normalisiert und zählen bei der Berechnung der maximalen Länge als ein einzelnes Zeichen.
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…");
}
});
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-validitystate-toolong-dev |