Qual'è la differenza tra: focus e: active?


Risposte:


413

:focuse :activesono due stati diversi.

  • :focus rappresenta lo stato in cui l'elemento è attualmente selezionato per ricevere input e
  • :active rappresenta lo stato in cui l'elemento è attualmente attivato dall'utente.

Ad esempio diciamo che abbiamo un <button>. Il <button>non avrà alcuna condizione per cominciare. Esiste e basta Se usiamo Tabper "focalizzare" il <button>, ora entra nel suo :focusstato. Se poi fai clic (o premi space), fai in modo che il pulsante entri nel suo :activestato ( ).

In quella nota, quando fai clic su un elemento, gli dai la concentrazione, che coltiva anche l'illusione che :focuse :activesiano gli stessi. Non sono gli stessi. Quando si fa clic sul pulsante è nello :focus:activestato.

Un esempio:

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

modifica: jsfiddle


2
Si noti inoltre che è possibile ottenere l'elemento focalizzato utilizzando la document.activeElementproprietà con nome confuso , anche se deve essere in un tentativo di cattura perché IE8 può generare un'eccezione. E tieni presente che le versioni precedenti dei browser possono trattare: attivo e: focalizzare in modo diverso. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
robocat,

6
Ho creato un JSFiddle del tuo esempio qui: jsfiddle.net/NCwvj Test in chrome (v24) Ho notato che facendo clic sul pulsante si invoca solo lo :activestato
Zaki Aziz,

3
Nit: l'ordine di focus e active influenza lo stato di un pulsante HTML se non c'è: active: focus state - Mettere: stato attivo dopo: focus, ottengo i cambiamenti attivi quando premo tab e premo spazio. Se: focus è l'ultimo, non vedo mai lo stato attivo.
Matt Gaunt,

@GauntFace, che browser stai usando? Su Chrome, l'ordine della tua focuse activedichiarazione non ha importanza. Importa solo quando si contraddicono a vicenda, ad esempio color:rede color:blue(poi vince l'ultimo).
Pacerier,

Domanda correlata e risposta, basata su questa: stackoverflow.com/a/48597351/5587480 . Dal mio punto di vista, molto facile da capire
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

Fonte: pseudo-classi CSS


10
Se collegato, questo non risponde alla domanda
Gregor Weber,

6
@GregorWeber espone la differenza mostrando le definizioni
Kamil Kiełczewski

1
Probabilmente lo sai, ma se li definisci in quell'ordine i visitedlink non cambieranno stile quando passano il mouse o fai clic perché la loro "visitabilità" avrà la precedenza sulle altre pseudo-classi. LVHFA è l'ordine che molte persone vorranno utilizzare nella maggior parte dei casi. Non so perché hai incluso lang...
Mentalista,

22

Ci sono quattro casi.

  1. Per impostazione predefinita, attivo e attivo sono entrambi disattivati.
  2. Quando si esegue la scheda per scorrere gli elementi attivabili , entreranno:focus (senza attivo).
  3. Quando si fa clic su un elemento non focalizzabile , entra :active(senza focus).
  4. Quando si fa clic su un elemento attivabile , entra :active:focus(attivo e attivo contemporaneamente).

Esempio:

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

Quando la pagina carica entrambi sono nel caso 1. Quando si preme il tasto tab si focalizzerà il secondo div e lo si vedrà esporre il caso 2. Quando si fa clic sul primo div si vede il caso 3. Quando si fa clic sul secondo div, si vede il caso 4 .


Se un elemento è focalizzabile o meno è un'altra domanda . La maggior parte non è di default. Ma, è lecito ritenere <a>, <input>, <textarea>sono attivabile per impostazione predefinita.


Grazie per aver sottolineato come gli elementi possono avere :activema non :focus. Questa è una cosa di cui ero confuso sul fatto che le altre risposte non rispondessero.
B-Stewart,

7

: focus è quando un elemento è in grado di accettare input: il cursore in una casella di input o un collegamento a cui è stato eseguito il tab.

: attivo è quando un elemento viene attivato da un utente - l'intervallo tra il momento in cui un utente preme un pulsante del mouse e poi lo rilascia.


2
Ciao! Esiste uno stato per "attualmente selezionato"? Diciamo che ci sono tre collegamenti nel menu di navigazione, come si ottiene per mantenere un certo colore quando attualmente "attivo" sul collegamento? per mostrare all'utente dove si trova attualmente. as: active funziona solo finché si fa clic sul collegamento (in questo caso), ma ritorna al rilascio del pulsante del mouse.
Kizer Yakuza,

0

Attivo è quando l'utente attiva quel punto (come il clic del mouse, se utilizziamo la scheda da un campo all'altro non c'è alcun segno dallo stile attivo. Forse il clic ha bisogno di più tempo, basta provare a tenere premuto il clic su quel punto), lo stato attivo si verifica dopo il punto è attivato. Prova questo :

<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

Il focus può essere dato solo dall'input da tastiera, ma un elemento può essere attivato da entrambi, un mouse o una tastiera.

Se uno usasse: concentrarsi su un collegamento, la regola di stile si applicherebbe solo premendo un pulsante sulla tastiera.


1
:focusnon funziona così. L'area di testo in cui sto digitando attualmente è attiva perché ho fatto clic su un pulsante. Inoltre può perdere e ripristinare lo stato attivo facendo clic su di esso e nuovamente all'interno. Tra un secondo, mi concentrerò sul pulsante Aggiungi commento a destra facendo clic su di esso. Tutto questo senza input da tastiera che causa lo stato attivo.
Joel Mellon,

Se non puoi concentrarti su un link, è semplicemente perché un link non può essere focalizzato se non lo metti su un ancoraggio o aggiungi un attributo tabindex. Ma puoi focalizzare gli elementi DOM come div o input.
Alex,

-5

L'uso di "focus" darà agli utenti della tastiera lo stesso effetto che gli utenti del mouse ottengono quando passano il mouse con il mouse. "Attivo" è necessario per ottenere lo stesso effetto in Internet Explorer.

La realtà è che questi stati non funzionano come dovrebbero per tutti gli utenti. Non utilizzare tutti e tre i selettori crea problemi di accessibilità per molti utenti solo tastiera che non sono fisicamente in grado di usare un mouse. Ti invito a partecipare alla sfida #nomouse (nomouse dot org).


1
: hover e: focus non sono la stessa cosa. : hover è uno stato specifico e: focus è uno stato specifico. È un po 'confuso e fuorviante identificarli.
Garry Polley,

1
Non sto dubitando della tua esperienza. Sto cercando di sottolineare che: hover e: active non sono la stessa cosa. Ed è fonte di confusione per le persone che non conoscono il web e l'accessibilità quando viene messo semplicemente: hover è approssimativamente uguale a: attivo per l'uso della tastiera. Apprezzo la risposta, ma forse un po 'più di profondità aiuterebbe?
Garry Polley,

Ovviamente non sono la stessa cosa! Non ho detto che erano approssimativamente uguali. (Ti preghiamo di leggere di nuovo i miei post.) Sto parlando della differenza tra l'uso del mouse e l'uso della tastiera per svolgere la stessa attività. Sto dicendo che devi usarli tutti per dare ad entrambi i gruppi di utenti la stessa esperienza. In caso contrario, solo gli utenti della tastiera che non sono fisicamente in grado di utilizzare un mouse avranno difficoltà a vedere dove si trovano su una pagina. Questo crea un problema di accessibilità per queste persone nella navigazione della pagina.
AMG,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.