: nieprawidłowy użytkownik - CSS-Tricks

Jest :user-invalidto pseudoklasa CSS, która znajduje się w propozycji w roboczej wersji roboczej CSS Selectors Level 4, która wybiera element formularza na podstawie tego, czy wartość wprowadzona przez użytkownika jest ważna, gdy porównuje się ją z wartością określoną jako akceptowaną w znacznik HTML po interakcji użytkownika końcowego z formularzem poza tymi danymi wejściowymi. W rzeczywistości :user-invalidzostała nazwana „Pseudoklasą interakcji użytkownika”, ponieważ jest unikalna w identyfikowaniu czynności użytkownika podczas wybierania elementu.

Weź następujące znaczniki HTML dla podstawowego formularza z polem numerycznym:

Ilość:

Zakres liczbowy ustawiony przez znacznik HTML dla danych wejściowych wynosi od 1do, 10ale wartość domyślna została ustawiona na 11. Oznacza to, że wartość jest nieprawidłowa od razu po załadowaniu formularza.

Jednak :user-invalidpseudoklasa nie zadziała, dopóki użytkownik nie wejdzie w interakcję z formularzem poza wpisaniem go w polu. Ta interakcja jest różnicą między :user-invalidi :invalid. Ta sama zasada dotyczy wprowadzanych wartości formularza, które są ustawiane przez :in-range, :out-of-rangei :required.

Gdy wartość, którą wprowadził użytkownik, zostanie uznana za nieprawidłową pozycję, możemy wybrać element:

input:user-invalid ( color: red; )

Poniższy obraz ilustruje różne stany między :validi :user-invalidna podstawie powyższego przykładu HTML.

Różnica między prawidłową wartością (po lewej) a nieprawidłową wartością wprowadzoną przez użytkownika po interakcji z formularzem.

Mylące jest to, jak blisko spokrewnione :invalidi :user-invalidsą. Jeśli są używane razem, rozróżnienie tych dwóch może być trudne:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Różnica między `:invalid`(w środku) a nieprawidłową wartością wprowadzoną przez użytkownika (po prawej) może być trudna do odróżnienia

Używanie jednego nad drugim lub posiadanie różnych stylów między nimi może okazać się lepszym doświadczeniem użytkownika w prawdziwym przypadku użycia.