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
# dom-validitystate-rangeoverflow

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rangeOverflow

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch