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 von einem Benutzer bearbeiteten <input> den durch das max-Attribut gesetzten Einschränkungen nicht entspricht.

Wenn das Feld numerischer Natur ist, einschließlich der Typen date, month, week, time, datetime-local, number und range und ein max-Wert festgelegt ist, und der Wert nicht den durch den max-Wert gesetzten Einschränkungen entspricht, wird die rangeOverflow-Eigenschaft auf true gesetzt.

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 Höchstwert von 18 für die Eingabe festlegt. Wenn der Benutzer eine Zahl größer als 18 eingibt, schlägt die Validierung der Einschränkung fehl und die Stile, die auf die :invalid und :out-of-range CSS-Pseudoklassen zutreffen

css

/* or :invalid */
input:out-of-range {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<pre id="log">Validation logged here...</pre>
<input type="number" id="age" max="18" />

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