ValidityState: rangeOverflow-Eigenschaft

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 rangeOverflow-Eigenschaft der ValidityState-Schnittstelle gibt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das max-Attribut des Elements festgelegten Einschränkungen entspricht.

Wenn das Feld einen numerischen Wert hat, einschließlich der Typen date, month, week, time, datetime-local, number und range und ein max-Wert gesetzt ist, wird die rangeOverflow-Eigenschaft true sein, falls der Wert nicht den durch den max-Wert festgelegten Einschränkungen entspricht.

Wert

Ein boolescher Wert, der true ist, wenn der ValidityState nicht den Einschränkungen entspricht.

Beispiele

Eingabe mit numerischem Überlauf

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Es wurde eine Einschränkung mit dem max-Attribut hinzugefügt, die einen maximalen Wert von 18 für die Eingabe festlegt. Wenn der Benutzer eine Zahl eingibt, die größer als 18 ist, schlägt die Validierung der Einschränkungen fehl, und die Stile, die den CSS-Pseudoklassen :invalid und :out-of-range entsprechen, werden angewendet.

css
/* or :invalid */
input:out-of-range {
  outline: red solid 3px;
}
html
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" max="18" />
js
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.rangeOverflow) {
    log("Number is too high!");
  } else {
    log("Input is valid…");
  }
});

Spezifikationen

Specification
HTML Standard
# dom-validitystate-rangeoverflow

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch