Quelle est la différence entre: focus et: active?


Réponses:


413

:focuset :activesont deux états différents.

  • :focus représente l'état lorsque l'élément est actuellement sélectionné pour recevoir une entrée et
  • :active représente l'état lorsque l'élément est actuellement activé par l'utilisateur.

Par exemple, disons que nous avons un fichier <button>. Ils <button>n'auront aucun état pour commencer. Cela existe simplement. Si nous utilisons Tabpour «focaliser» le <button>, il entre maintenant dans son :focusétat. Si vous cliquez ensuite (ou appuyez sur space), vous faites alors entrer le bouton dans son :activeétat ( ).

Sur cette note, lorsque vous cliquez sur un élément, vous lui donnez le focus, ce qui cultive également l'illusion :focuset qui :activesont les mêmes. Ils ne sont pas les mêmes. Lorsque vous cliquez dessus, le bouton est en :focus:activeétat.

Un exemple:

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

modifier: jsfiddle


2
Notez également que vous pouvez obtenir l'élément focalisé en utilisant la document.activeElementpropriété nommée de manière confuse , bien qu'elle doive être dans un catch try car IE8 peut lever une exception. Et sachez que les anciennes versions des navigateurs peuvent traiter: actif et: se concentrer différemment. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
robocat

6
J'ai créé un JSFiddle de votre exemple ici: jsfiddle.net/NCwvj Test en chrome (v24) J'ai remarqué que cliquer sur le bouton n'appelle que l' :activeétat
Zaki Aziz

3
Nit: l'ordre de mise au point et actif affecte l'état d'un bouton HTML s'il n'y a pas: actif: état de mise au point - Put: état actif après: mise au point, j'obtiens les modifications actives lorsque j'appuie sur tabulation et sur espace. Si: le focus est le dernier, je ne vois jamais l'état actif.
Matt Gaunt

@GauntFace, quel navigateur utilisez-vous? Sur Chrome, l'ordre de votre déclaration focuset activen'a pas d'importance. Cela n'a d'importance que lorsqu'ils se contredisent, par exemple color:redet color:blue(puis le dernier gagne).
Pacerier

Question connexe et réponse, basée sur celle-ci: stackoverflow.com/a/48597351/5587480 . De mon point de vue, très facile à comprendre
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

Source: CSS Pseudo-classes


10
Bien que lié, cela ne répond pas à la question
Gregor Weber

6
@GregorWeber il expose la différence en montrant des définitions
Kamil Kiełczewski

1
Vous le savez probablement, mais si vous les définissez dans cet ordre, les visitedliens ne changeront pas de style lorsqu'ils seront survolés ou cliqués, car leur "visite" remplacera les autres pseudo-classes. LVHFA est l'ordre que la plupart des gens voudront utiliser dans la plupart des cas. Je ne sais pas pourquoi vous avez inclus lang...
Mentalist

22

Il y a quatre cas.

  1. Par défaut, actif et focus sont tous deux désactivés.
  2. Lorsque vous tabulez pour parcourir les éléments focalisables , ils entreront:focus (sans être actifs).
  3. Lorsque vous cliquez sur un élément non focalisable , il entre:active (sans focus).
  4. Lorsque vous cliquez sur un élément focalisable, il entre :active:focus(actif et concentré simultanément).

Exemple:

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

Lorsque la page se charge, les deux sont dans le cas 1. Lorsque vous appuyez sur tab, vous focaliserez le deuxième div et le verrez le cas d'exposition 2. Lorsque vous cliquez sur le premier div, vous voyez le cas 3. Lorsque vous cliquez sur le deuxième div, vous voyez le cas 4 .


Qu'un élément soit focalisable ou non est une autre question . La plupart ne le sont pas par défaut. Mais, il est sûr de supposer <a>, <input>, <textarea>sont focusable par défaut.


Merci d'avoir souligné comment les éléments peuvent avoir :activemais pas :focus. C'est une chose qui m'a dérouté et que les autres réponses n'ont pas abordé.
B-Stewart du

7

: le focus est lorsqu'un élément est en mesure d'accepter la saisie - le curseur dans une zone de saisie ou un lien qui a été tabulé.

: active est lorsqu'un élément est activé par un utilisateur - le temps entre le moment où un utilisateur appuie sur un bouton de la souris, puis le relâche.


2
Salut! Existe-t-il un état pour "actuellement cliqué"? Disons qu'il y a trois liens dans le menu de navigation, comment faire pour qu'il garde une certaine couleur lorsqu'il est actuellement "sur" le lien? pour montrer à l'utilisateur où il se trouve actuellement. as: active ne fonctionne que tant que le lien (dans ce cas) est cliqué, mais revient au relâchement du bouton de la souris.
Kizer Yakuza

0

Actif, c'est lorsque l'utilisateur active ce point (comme en cliquant avec la souris, si nous utilisons l'onglet d'un champ à l'autre, il n'y a pas de signe du style actif. le point est activé. Essaye ça :

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

-3

La mise au point ne peut être donnée que par la saisie au clavier, mais un élément peut être activé par les deux, une souris ou un clavier.

Si l'on utilisait: se concentrer sur un lien, la règle de style ne s'appliquerait qu'en appuyant sur un bouton du clavier.


1
:focusne fonctionne pas comme ça. La zone de texte que je tape actuellement est active car j'ai cliqué sur un bouton. Il peut également perdre et restaurer le focus en cliquant dessus, puis à nouveau. Dans une seconde, je vais mettre l'accent sur le bouton Ajouter un commentaire à droite en cliquant dessus. Tout cela sans saisie au clavier provoquant la mise au point.
Joel Mellon

Si vous ne pouvez pas vous concentrer sur un lien, c'est simplement parce qu'un lien ne peut pas être concentré à moins que vous ne le placiez sur une ancre ou que vous ajoutiez un attribut tabindex. Mais vous pouvez concentrer les éléments DOM comme les divs ou les entrées.
Alex

-5

L'utilisation de "focus" donnera aux utilisateurs du clavier le même effet que les utilisateurs de souris obtiennent lorsqu'ils survolent avec une souris. "Actif" est nécessaire pour obtenir le même effet dans Internet Explorer.

La réalité est que ces états ne fonctionnent pas comme ils le devraient pour tous les utilisateurs. Le fait de ne pas utiliser les trois sélecteurs crée des problèmes d'accessibilité pour de nombreux utilisateurs utilisant uniquement un clavier physiquement incapables d'utiliser une souris. Je vous invite à relever le défi #nomouse (nomouse dot org).


1
: hover et: focus ne sont pas la même chose. : hover est un état spécifique et: focus est un état spécifique. C'est un peu déroutant et trompeur de les assimiler.
Garry Polley

1
Je ne doute pas de votre expertise. J'essaie de souligner que: survoler et: actif ne sont pas la même chose. Et c'est déroutant pour les nouveaux utilisateurs du Web et de l'accessibilité quand il est aussi simple que: hover est à peu près égal à: actif pour l'utilisation du clavier. J'apprécie la réponse, mais peut-être qu'un peu plus de profondeur aiderait?
Garry Polley

Bien sûr, ce n'est pas la même chose! Je n'ai pas dit qu'ils étaient à peu près les mêmes. (Veuillez relire mes articles.) Je parle de la différence entre l'utilisation d'une souris et l'utilisation d'un clavier pour accomplir la même tâche. Je dis que vous devez les utiliser tous pour donner aux deux groupes d'utilisateurs la même expérience. Sinon, seuls les utilisateurs physiquement incapables d'utiliser une souris auront du mal à voir où ils ont tabulé sur une page. Cela crée un problème d'accessibilité pour ces personnes lors de la navigation dans la page.
AMG
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.