ValidityState: Eigenschaft tooLong

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 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

Spezifikation
HTML # dom-validitystate-toolong-dev

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden