2016-07-06 7 views
19

BeispielWas ist der Unterschied zwischen: out-of-range und: ungültig?

input[type="number"] { 
    background: white; 
    color: black; 
} 
input[type="number"]:in-range { 
    background: green; 
    color: white; 
} 
input[type="number"]:out-of-range { 
    background: red; 
    color: white; 
} 
<input c type="number" min="1" max="100"> 

Was ist der Unterschied zwischen :out-of-range und :invalid?

Antwort

15

:out-of-range Der Selektor wählt Elemente, die einen Wert haben, der außerhalb des eingestellten min und max Werte des Eingangs ist

<input type="number" min="5" max="10" value="17"> <!-- Gets selected with :out-of-range --> 
<input type="number" min="5" max="10" value="8"> <!-- Does not get selected with :out-of-range --> 

:invalid Die Schaltelemente auswählt, die ungültig sind, nach dem, was der Typ eingegeben wird.

<input type="email" value="[email protected]"> <!-- Is a valid e-mail address and does not get selected with :invalid --> 
<input type="email" value="foo"> <!-- Is not a valid e-mail address and gets selected with :invalid --> 

JSFiddle

+0

Beispiel: An welchem ​​Tag haben Sie Geburtstag? : out-of-range wäre 32+ während: ungültig wäre Freitag oder der zweite – Jammin4CO

9

Es ist einfach, aber denken Sie daran, dass einige Browser diese Funktionen nicht unterstützt.

: out-of-range

<input type="date" name="dateCheck" min="2000-01-01" max="2016-07-06"> 
<!-- in this case if you enter date after 2016-07-06 input:out-of-range will match --> 

The: out-of-Bereichswähler alle Elemente mit einem Wert wählt, die außerhalb eines bestimmten Bereichs liegt.

Hinweis: Der Auswahlbereich out-of-range funktioniert nur bei Elementen mit Bereichsbeschränkungen, z. B. bei Eingabeelementen mit Min- und Max-Attributen.

Tipp: Verwenden Sie den Bereichswahlschalter, um alle Elemente mit einem Wert auszuwählen, der innerhalb eines angegebenen Bereichs liegt.

Quelle: http://www.w3schools.com/cssref/sel_out-of-range.asp

: in-Bereich auch Version von umgekehrt wird: out-of-range

: ungültige

<input type="date" name="dateCheckInvalid" min="2016-07-06"> 
<!-- in this case if u enter date before 2016-07-06 input:invalid will match --> 

Die : ungültiger Selektor s wählt Formularelemente mit einem Wert aus, der nicht gemäß den Elementeinstellungen validiert wird.

Hinweis: Das: ungültige Selektor funktioniert nur für Formularelemente mit Einschränkungen, wie Eingabeelemente mit min und max-Attributen, E-Mail-Felder ohne Recht E-Mail oder Zahlenfelder ohne einen numerischen Wert, usw.

Tipp : Verwenden Sie den: valid-Selektor, um Formularelemente mit einem Wert auszuwählen, der gemäß den Elementeinstellungen gültig ist.

Quelle: http://www.w3schools.com/cssref/sel_invalid.asp

Siehe einfache Demo: https://jsfiddle.net/bytdubk4/

2

Der Out-of-Range-Selektor wendet den angegebenen Stil nur dann, wenn der Wert des Eingangselementes ist "out of range".Der Auswahlbereich außerhalb des Bereichs funktioniert nur für Elemente mit Bereichsbeschränkungen, z. B. Eingabeelemente mit Min- und Max-Attributen.

ZB: Die maximale Anzahl von Zeichen, die in ein Eingabefeld eingegeben werden können, ist 50. Wenn der Benutzer jedoch versucht, mehr einzugeben, kann das Eingabefeld die Farbe ändern (wie eine rote Markierung)).

Der ungültige Selektor wendet den angegebenen Stil nur an, wenn der Wert des Eingabeelements "ungültig" ist. Dies funktioniert nur für Formularelemente mit Einschränkungen, wie z. B. Eingabeelemente mit Min- und Max-Attributen, E-Mail-Felder ohne eine gültige E-Mail oder Zahlenfelder ohne numerischen Wert usw. Wenn also der vom Benutzer eingegebene Eingabewert falsch ist oder ungültig Der angegebene Stil wird auf das Eingabefeld angewendet.

Beispiel: Wenn eine eingegebene E-Mail als ungültig erkannt wird, kann das Eingabefeld deaktiviert werden, während dem Benutzer eine Benachrichtigung/Anweisung angezeigt wird.

Verwandte Themen