Baseline Widely available
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.
Ein boolescher Wert, der true
ist, wenn der ValidityState
nicht den Beschränkungen entspricht.
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.
/* 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;
}
<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 Browser-Kompatibilität Siehe auch MDN-Feedback-Box War diese Ãbersetzung hilfreich?
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4