Jaka jest różnica między: focus a: active?

Odpowiedzi:

413

:focusi :activesą dwoma różnymi stanami.

  • :focus reprezentuje stan, w którym element jest obecnie wybrany do odbioru danych wejściowych i
  • :active reprezentuje stan, w którym element jest obecnie aktywowany przez użytkownika.

Powiedzmy na przykład, że mamy <button>. Na początku <button>nie będzie żadnego stanu. Po prostu istnieje. Jeśli użyjemy, Tababy „skupić się” na <button>, to teraz wejdzie w swój :focusstan. Jeśli następnie klikniesz (lub naciśniesz space), sprawisz, że przycisk przejdzie w :activestan ( ).

W tym pamiętać, kiedy klikniesz na element, dajesz koncentrować, który kultywuje również złudzenie, że :focusi :activesą takie same. One nie są takie same. Po kliknięciu przycisk jest w :focus:activestanie.

Przykład:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

edycja: jsfiddle

Andrew Moore
źródło
2
Zauważ też, że można uzyskać element skupiony za pomocą myląco nazwanej document.activeElementwłaściwości, chociaż musi on znajdować się w try catch, ponieważ IE8 może zgłosić wyjątek. I pamiętaj, że starsze wersje przeglądarek mogą traktować: aktywne i: skupiać się inaczej. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
robocat
6
Utworzyłem JSFiddle twojego przykładu tutaj: jsfiddle.net/NCwvj Testowanie w chrome (v24) Zauważyłem, że kliknięcie przycisku wywołuje tylko :activestan
Zaki Aziz
3
Nit: kolejność fokusu i aktywna wpływa na stan przycisku HTML, jeśli nie ma: aktywna: fokusowa stawianie - Wprowadzenie: aktywna faza po: fokusie, dostaję aktywne zmiany po naciśnięciu tabulatora i spacji. Jeśli: focus jest ostatni, nigdy nie widzę stanu aktywnego.
Matt Gaunt
@GauntFace, jakiej przeglądarki używasz? W Chrome kolejność Twojego zgłoszenia focusi activedeklaracja nie ma znaczenia. Ma to znaczenie tylko wtedy, gdy są ze sobą sprzeczne, np. color:redI color:blue(wtedy ostatni wygrywa).
Pacerier
Powiązane pytanie i odpowiedź na podstawie tego: stackoverflow.com/a/48597351/5587480 . Z mojego punktu widzenia bardzo łatwy do zrozumienia
John CJ
59
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Źródło: Pseudoklasy CSS

Rubens Farias
źródło
10
Chociaż jest spokrewniony, to nie odpowiada na pytanie
Gregor Weber,
6
@GregorWeber uwidacznia różnicę, pokazując definicje
Kamil Kiełczewski
1
Prawdopodobnie wiesz o tym, ale jeśli zdefiniujesz je w tej kolejności, visitedlinki nie zmienią stylu po najechaniu myszką lub kliknięciu, ponieważ ich „odwiedzalność” zastąpi inne pseudoklasy. LVHFA to kolejność, z której większość osób będzie chciała korzystać w większości przypadków. Nie jestem pewien, dlaczego zawarłeś lang...
Mentalista
22

Istnieją cztery przypadki.

  1. Domyślnie aktywne i fokusowe są wyłączone.
  2. Kiedy przechodzisz między zakładkami, aby przechodzić między elementami:focus aktywowanymi, wejdą one (bez aktywnych).
  3. Po kliknięciu na nie aktywowana elementu , wchodzi:active (bez ostrości).
  4. Po kliknięciu na zmianę ostrości elementu wchodzi on :active:focus(aktywnej i skupić się jednocześnie).

Przykład:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Gdy strona ładuje się, oba są w skrzynce 1. Po naciśnięciu klawisza skupisz drugi div i zobaczysz, że pokazuje wielkość liter 2. Po kliknięciu pierwszego elementu div zobaczysz wielkość liter 3. Gdy klikniesz drugi element div, zobaczysz wielkość liter 4 .


To, czy element można ustawić, czy nie, to inna kwestia . Większość nie jest domyślnie. Ale to jest bezpiecznie założyć <a>, <input>, <textarea>jest aktywowana domyślnie.

James Lawson
źródło
Dziękujemy za wskazanie, w jaki sposób elementy mogą mieć, :activeale nie mogą :focus. To jedna kwestia, która mnie myliła, ponieważ inne odpowiedzi nie dotyczyły.
B-Stewart
6

: focus ma miejsce, gdy element jest w stanie zaakceptować dane wejściowe - kursor w polu wejściowym lub łącze, które zostało tabulowane.

: aktywny jest, gdy element jest aktywowany przez użytkownika - czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go.

Emilia
źródło
2
Cześć! Czy istnieje stan „aktualnie klikniętego”? Powiedzmy, że w menu nawigacyjnym znajdują się trzy linki. Jak uzyskać ten kolor, aby zachować określony kolor, gdy link jest aktualnie „włączony”? aby pokazać użytkownikowi, gdzie aktualnie jest. as: active działa tylko tak długo, jak długo klikany jest link (w tym przypadku), ale zmienia się ponownie po zwolnieniu przycisku myszy.
Kizer Yakuza,
0

Aktywny jest, gdy użytkownik aktywuje ten punkt (Podobnie jak kliknięcie myszą, jeśli używamy tabulacji z pola na pole, nie ma znaku z aktywnego stylu. Może kliknięcie wymaga więcej czasu, po prostu przytrzymaj ten punkt), fokus jest wykonywany po punkt jest aktywowany. Spróbuj tego :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>
Anggie Aziz
źródło
-3

Fokus można uzyskać tylko za pomocą klawiatury, ale element można aktywować zarówno myszą, jak i klawiaturą.

Jeśli użyjesz: skoncentruj się na łączu, reguła stylu będzie obowiązywać tylko po naciśnięciu klawisza na klawiaturze.

Volker Ackermann
źródło
1
:focustak nie działa. Obszar tekstowy, który wpisuję, jest obecnie aktywny, ponieważ kliknąłem przycisk. Może także stracić i przywrócić ostrość, klikając go i ponownie w niego wchodząc. Za chwilę skupię się na przycisku Dodaj komentarz po prawej stronie, klikając go. Wszystko to bez wprowadzania danych z klawiatury powodujących skupienie.
Joel Mellon
Jeśli nie możesz skupić się na łączu, to po prostu dlatego, że nie można skupić łącza, dopóki nie umieścisz go na kotwicy lub nie dodasz atrybutu tabindex. Ale możesz skupić elementy DOM, takie jak div lub dane wejściowe.
Alex
-5

Użycie „skupienia” da użytkownikom klawiatury taki sam efekt, jaki uzyskują użytkownicy myszy po najechaniu myszką. „Aktywny” jest potrzebny, aby uzyskać ten sam efekt w Internet Explorerze.

W rzeczywistości stany te nie działają tak, jak powinny dla wszystkich użytkowników. Nieużywanie wszystkich trzech selektorów stwarza problemy z dostępem dla wielu użytkowników korzystających wyłącznie z klawiatury, którzy fizycznie nie są w stanie używać myszy. Zapraszam do podjęcia wyzwania #nomouse (nomouse dot org).

AMG
źródło
1
: hover i: focus to nie to samo. : hover to określony stan, a: focus to określony stan. Porównywanie ich jest trochę mylące i mylące.
Garry Polley,
1
Nie wątpię w twoją wiedzę. Próbuję zaznaczyć, że: hover i: active to nie to samo. Jest to mylące dla osób, które nie mają doświadczenia w korzystaniu z Internetu i dostępności, gdy jest to tak proste: hover jest w przybliżeniu równy: aktywny dla użycia klawiatury. Doceniam odpowiedź, ale może pomogłaby odrobina głębi?
Garry Polley,
Oczywiście, że to nie to samo! Nie powiedziałem, że są mniej więcej takie same. (Przeczytaj ponownie moje posty.) Mówię o różnicy między używaniem myszy a klawiaturą do wykonania tego samego zadania. Mówię, że musisz użyć ich wszystkich, aby zapewnić obu użytkownikom takie same wrażenia. W przeciwnym razie tylko użytkownicy klawiatury, którzy fizycznie nie będą mogli korzystać z myszy, będą mieli trudności z ustaleniem, gdzie znajdują się tabulatory na stronie. Stwarza to problem z dostępem dla tych osób podczas poruszania się po stronie.
AMG