ValidityState: Eigenschaft `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.

Die schreibgeschützte tooLong-Eigenschaft des ValidityState-Interfaces gibt an, ob der Wert eines <input>- oder <textarea>-Elements, nachdem er vom Nutzer bearbeitet wurde, die maximale Codeinheitenlänge überschreitet, die durch das maxlength-Attribut des Elements festgelegt wurde.

Wert

Ein boolescher Wert, der true ist, wenn der ValidityState nicht den Vorgaben entspricht.

Beispiele

Textarea mit zu langer Zeichenzahl

Das folgende Beispiel überprüft die Gültigkeit eines textarea-Elements. Ein Zwang wurde durch das maxlength-Attribut hinzugefügt, sodass das Textfeld maximal 10 Zeichen erwartet. Wenn zu viele Zeichen in dem Textarea vorhanden sind (wie unten der Fall), schlägt die Element-Validierung fehl, und die Styles der :invalid CSS-Pseudo-Klasse werden angewendet.

Beim Bearbeiten des Textfelds lässt der Browser nicht zu, dass der Nutzer Zeichen hinzufügt, die die Validierung der maximalen Zeichenzahl überschreiten würden, sodass zunächst nur das Löschen von Zeichen erlaubt ist. Zeilenumbrüche werden normalisiert und zählen als ein einzelnes Zeichen in der Berechnung der maximalen Länge.

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…");
  }
});

Spezifikationen

Specification
HTML # dom-validitystate-toolong-dev