Was ist der Unterschied zwischen: Fokus und: Aktiv?

274

Was ist der Unterschied zwischen der :focusund der :activePseudoklasse?

Jitendra Vyas
quelle

Antworten:

412

:focusund :activesind zwei verschiedene Zustände.

  • :focus stellt den Zustand dar, in dem das Element aktuell ausgewählt ist, um Eingaben zu empfangen, und
  • :active stellt den Status dar, in dem das Element gerade vom Benutzer aktiviert wird.

Nehmen wir zum Beispiel an, wir haben eine <button>. Der <button>wird zunächst keinen Zustand haben. Es existiert einfach. Wenn wir Tabdem "Fokus" geben <button>, tritt es jetzt in seinen :focusZustand ein. Wenn Sie dann klicken (oder drücken space), wird die Schaltfläche in den :activeStatus ( ) versetzt.

In diesem Sinne, wenn Sie auf ein Element klicken, geben Sie ihm den Fokus, was auch die Illusion kultiviert, dass :focusund :activedasselbe sind. Sie sind nicht gleich. Wenn Sie darauf klicken, befindet sich die Schaltfläche im :focus:activeStatus.

Ein Beispiel:

<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>

edit: jsfiddle

Andrew Moore
quelle
2
Beachten Sie auch, dass Sie das fokussierte Element mithilfe der verwirrend benannten document.activeElementEigenschaft abrufen können, obwohl es sich um einen Try-Catch handeln muss, da IE8 eine Ausnahme auslösen kann. Beachten Sie auch, dass ältere Browserversionen möglicherweise Folgendes behandeln: aktiv und: unterschiedlich fokussieren. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
Robocat
6
Ich habe hier eine JSFiddle Ihres Beispiels erstellt: jsfiddle.net/NCwvj Testen in Chrome (v24) Ich habe festgestellt, dass das Klicken auf die Schaltfläche nur den :activeStatus aufruft
Zaki Aziz
3
Nit: Die Reihenfolge von Fokus und Aktiv wirkt sich auf den Status einer HTML-Schaltfläche aus, wenn es keine gibt: Aktiv: Fokusstatus - Putting: Aktiv Status nach: Fokus, ich erhalte die aktiven Änderungen, wenn ich die Tabulatortaste und die Leertaste drücke. Wenn: Fokus zuletzt ist, sehe ich nie den aktiven Zustand.
Matt Gaunt
@GauntFace, welchen Browser benutzt du? Bei Chrome spielt die Reihenfolge Ihrer focusund Ihrer activeErklärung keine Rolle. Es ist nur wichtig, wenn sie sich widersprechen, zB color:redund color:blue(dann gewinnt der letzte).
Pacerier
Verwandte Frage und Antwort, basierend auf dieser: stackoverflow.com/a/48597351/5587480 . Aus meiner Sicht sehr leicht zu verstehen
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

Quelle: CSS-Pseudoklassen

Rubens Farias
quelle
10
Während verwandt, beantwortet dies nicht die Frage
Gregor Weber
6
@ GregorWeber es enthüllt Unterschied, indem es Definitionen zeigt
Kamil Kiełczewski
1
Sie wissen das wahrscheinlich, aber wenn Sie sie in dieser Reihenfolge definieren, visitedändern Links den Stil nicht , wenn Sie den Mauszeiger bewegen oder darauf klicken, da ihre "Besuchsfähigkeit" die anderen Pseudoklassen überschreibt. LVHFA ist die Reihenfolge, die die meisten Menschen in den meisten Fällen verwenden möchten. Nicht sicher, warum Sie aufgenommen haben lang...
Mentalist
22

Es gibt vier Fälle.

  1. Standardmäßig sind sowohl Aktiv als auch Fokus deaktiviert.
  2. Wenn Sie auf der Registerkarte durch fokussierbare Elemente blättern , werden diese eingegeben :focus(ohne aktiv).
  3. Wenn Sie klicken auf einem nicht-fokussierbare Element , tritt es :active(ohne Fokus).
  4. Wenn Sie klicken einen auf fokussierbare Element es betritt :active:focus(aktiv und konzentrieren sich gleichzeitig).

Beispiel:

<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;
}

Wenn die Seite geladen wird, sind beide in Fall 1. Wenn Sie die Tabulatortaste drücken, fokussieren Sie das zweite Div und sehen, dass es Fall 2 zeigt. Wenn Sie auf das erste Div klicken, sehen Sie Fall 3. Wenn Sie auf das zweite Div klicken, sehen Sie Fall 4 .


Ob ein Element fokussierbar ist oder nicht, ist eine andere Frage . Die meisten sind nicht standardmäßig. Aber es ist sicher anzunehmen <a>, <input>, <textarea>sind fokussierbar standardmäßig.

James Lawson
quelle
Vielen Dank für den Hinweis, wie Elemente haben können, :activeaber nicht :focus. Das ist eine Sache, die mich verwirrt hat, dass die anderen Antworten nicht angesprochen haben.
B-Stewart
6

: Fokus ist, wenn ein Element Eingaben akzeptieren kann - der Cursor in einem Eingabefeld oder ein Link, zu dem eine Registerkarte erstellt wurde.

: Aktiv ist, wenn ein Element von einem Benutzer aktiviert wird - die Zeit zwischen dem Drücken einer Maustaste durch einen Benutzer und dem anschließenden Loslassen.

Emily
quelle
2
Hallo! Gibt es einen Status für "aktuell geklickt"? Nehmen wir an, es gibt drei Links im Navigationsmenü. Wie können Sie eine bestimmte Farbe beibehalten, wenn der Link gerade "aktiviert" ist? um dem Benutzer zu zeigen, wo er sich gerade befindet. as: active funktioniert nur so lange, wie auf den Link (in diesem Fall) geklickt wird, ändert sich jedoch beim Loslassen der Maustaste wieder.
Kizer Yakuza
0

Aktiv ist, wenn der Benutzer diesen Punkt aktiviert (wie beim Klicken mit der Maus, wenn wir die Registerkarte von Feld zu Feld verwenden, gibt es kein Zeichen für den aktiven Stil. Vielleicht benötigt das Klicken mehr Zeit, versuchen Sie einfach, den Klick auf diesen Punkt zu halten), wird der Fokus danach ausgeführt Der Punkt ist aktiviert. Versuche dies :

<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
quelle
-3

Der Fokus kann nur durch Tastatureingabe gegeben werden, aber ein Element kann sowohl durch eine Maus als auch durch eine Tastatur aktiviert werden.

Wenn man verwenden würde: Fokus auf einen Link, würde die Stilregel nur gelten, wenn man ein Botton auf der Tastatur drückt.

Volker Ackermann
quelle
1
:focusfunktioniert so nicht. Der Textbereich, den ich eingebe, ist derzeit fokussiert, da ich auf eine Schaltfläche geklickt habe. Es kann auch den Fokus verlieren und wiederherstellen, indem Sie aus ihm heraus und wieder hinein klicken. In nur einer Sekunde werde ich mich auf die Schaltfläche Kommentar hinzufügen rechts konzentrieren, indem ich darauf klicke. All dies ohne Tastatureingabe, die den Fokus verursacht.
Joel Mellon
Wenn Sie den Fokus nicht auf einen Link haben können, liegt dies einfach daran, dass ein Link nur fokussiert werden kann, wenn Sie ihn auf einen Anker setzen oder ein Tabindex-Attribut hinzufügen. Sie können jedoch DOM-Elemente wie Divs oder Eingaben fokussieren.
Alex
-5

Die Verwendung von "Fokus" gibt Tastaturbenutzern den gleichen Effekt, den Mausbenutzer erhalten, wenn sie mit der Maus schweben. "Aktiv" wird benötigt, um den gleichen Effekt in Internet Explorer zu erzielen.

Die Realität ist, dass diese Zustände nicht für alle Benutzer so funktionieren, wie sie sollten. Wenn nicht alle drei Selektoren verwendet werden, treten bei vielen Benutzern, die nur über die Tastatur verfügen und physisch keine Maus verwenden können, Probleme mit der Barrierefreiheit auf. Ich lade Sie ein, die # nomouse-Herausforderung anzunehmen (nomouse dot org).

AMG
quelle
1
: hover und: focus sind nicht dasselbe. : hover ist ein bestimmter Zustand und: focus ist ein bestimmter Zustand. Es ist ein wenig verwirrend und irreführend, sie gleichzusetzen.
Garry Polley
1
Ich zweifle nicht an Ihrem Fachwissen. Ich versuche darauf hinzuweisen, dass: Hover und: Active nicht dasselbe sind. Und es ist verwirrend für Leute, die neu im Web und in der Barrierefreiheit sind, wenn es so einfach ausgedrückt wird wie: Hover ist ungefähr gleich: Aktiv für die Tastaturnutzung. Ich schätze die Antwort, aber vielleicht würde ein bisschen mehr Tiefe helfen?
Garry Polley
Natürlich sind sie nicht dasselbe! Ich habe nicht gesagt, dass sie ungefähr gleich sind. (Bitte lesen Sie meine Beiträge noch einmal.) Ich spreche über den Unterschied zwischen der Verwendung einer Maus und einer Tastatur, um dieselbe Aufgabe auszuführen. Ich sage, Sie müssen alle verwenden, um beiden Benutzergruppen die gleiche Erfahrung zu bieten. Andernfalls haben nur Benutzer der Tastatur, die physisch nicht in der Lage sind, eine Maus zu verwenden, Schwierigkeiten zu erkennen, wohin sie auf einer Seite geführt haben. Dies führt zu einem Problem mit der Barrierefreiheit für diese Personen beim Navigieren auf der Seite.
AMG