Qual è la differenza tra il :focus
e :active
pseudo-classi?
Qual è la differenza tra il :focus
e :active
pseudo-classi?
Risposte:
:focus
e :active
sono 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 :focus
stato. Se poi fai clic (o premi space), fai in modo che il pulsante entri nel suo :active
stato ( ).
In quella nota, quando fai clic su un elemento, gli dai la concentrazione, che coltiva anche l'illusione che :focus
e :active
siano gli stessi. Non sono gli stessi. Quando si fa clic sul pulsante è nello :focus:active
stato.
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
:active
stato
focus
e active
dichiarazione non ha importanza. Importa solo quando si contraddicono a vicenda, ad esempio color:red
e color:blue
(poi vince l'ultimo).
: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
visited
link 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
...
Ci sono quattro casi.
:focus
(senza attivo).:active
(senza focus).: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.
:active
ma non :focus
. Questa è una cosa di cui ero confuso sul fatto che le altre risposte non rispondessero.
: 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.
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"/>
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.
:focus
non 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.
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).
document.activeElement
proprietà 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) { } }