Quelle est la différence entre :focus et :active?
Quelle est la différence entre le :focus
et :active
pseudo-classes?
Vous devez vous connecter pour publier un commentaire.
Quelle est la différence entre le :focus
et :active
pseudo-classes?
Vous devez vous connecter pour publier un commentaire.
:focus
et:active
sont deux états différents.:focus
représente l'état lorsque l'élément est 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
<button>
. Le<button>
n'auront pas d'état pour commencer. Il existe juste. Si nous utilisons Tab pour donner "focus" à la<button>
, il entre maintenant dans sa:focus
état. Si vous cliquez ensuite sur (ou appuyez sur la touche espace), vous pouvez vous rendre sur le bouton entrer son (:active
) de l'état.Sur cette note, lorsque vous cliquez sur un élément, vous lui donnez l'accent, aussi, qui cultive l'illusion que
:focus
et:active
sont les mêmes. Ils ne sont pas les mêmes. Lorsque cliqué sur le bouton est dans:focus:active
état.Un exemple:
HTML:
edit: jsfiddle
document.activeElement
de propriété, même s'il doit être dans un try catch parce que IE8 peut lever une exception. Et être conscient que les anciennes versions de navigateurs peuvent traiter :active et :focus différemment.function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
:active
étatfocus
etactive
déclaration n'a pas d'importance. Il importe seulement quand ils se contredisent l'une l'autre par exemplecolor:red
etcolor:blue
(la dernière que l'on gagne).Source: CSS Pseudo-classes
Il y a quatre cas.
:focus
(sans principe actif).:active
(sans accent).:active:focus
(actif et de se concentrer simultanément).Exemple:
Lorsque le chargement de la page les deux sont dans le cas 1. Lorsque vous appuyez sur la touche tab vous permettra de mettre au point la deuxième div et de les voir exposer le cas 2. Lorsque vous cliquez sur le premier div vous voir cas 3. Lorsque vous cliquez sur le deuxième div, vous voyez de cas 4.
Si un élément peut recevoir le focus ou pas, c'est une autre question. La plupart ne sont pas par défaut. Mais, il est sûr de supposer
<a>
,<input>
,<textarea>
sont peut recevoir le focus par défaut.:active
mais pas:focus
. C'est une chose que j'étais confus au sujet de qui les autres réponses n'ont pas d'adresse.:l'accent est quand un élément est en mesure d'accepter l'entrée - le curseur dans un champ de texte ou un lien qui a été tabulés.
:active, c'est quand un élément est activé par un utilisateur, le temps entre le moment où un utilisateur appuie sur un bouton de la souris et puis il libère.
Active est lorsque l'utilisateur activation de ce point (Comme la souris en cliquant, si nous utilisons onglet du champ-de-champ il n'y a aucun signe de style actif. Peut-être en cliquant sur besoin de plus de temps, essayez de tenir cliquez sur ce point), l'accent est arrivé après que le point est activé. Essayez ceci :
L'accent 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 veut utiliser :se concentrer sur un lien, le style de la règle ne s'appliquerait qu'à appuyer sur un bouton sur le clavier.
:focus
ne fonctionne pas comme ça. Le textarea je suis en tapant dans a actuellement le focus parce que j'ai cliqué sur un bouton. Il peut également perdre et de restauration de l'accent en cliquant en dehors de ça, et encore. Dans juste une seconde, je vais donner le focus au Ajouter un Commentaire bouton à droite en cliquant dessus. Tout cela sans clavier d'entrée provoquant l'accent.À l'aide de "focus" donnera les utilisateurs du clavier le même effet que la souris les utilisateurs quand ils survolez avec la souris. "Active" est nécessaire pour obtenir le même effet dans Internet Explorer.
La réalité est, ces états ne fonctionnent pas comme ils le devraient pour tous les utilisateurs. N'utilisant pas tous les trois sélecteurs crée des problèmes d'accessibilité pour beaucoup de clavier uniquement les utilisateurs qui sont physiquement incapables d'utiliser une souris. Je vous invite à prendre le #nomouse défi (nomouse dot org).