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 des ValidityState-Interfaces gibt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das max-Attribut des Elements festgelegten Beschränkungen 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, wird die rangeOverflow-Eigenschaft auf true gesetzt, wenn der Wert nicht den durch den max-Wert festgelegten Beschränkungen entspricht.

Wert

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

Beispiele

Eingabe mit numerischem Überlauf

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Mit Hilfe des max-Attributs wurde eine Beschränkung hinzugefügt, die einen maximalen Wert von 18 für die Eingabe festlegt. Wenn der Benutzer eine Zahl größer als 18 eingibt, schlägt die Überprüfung der Beschrä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;
}

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