Tabindex Focus Styles

Ho creato un tabbable div con l'attributo tabindex per rendere accessibile il contenuto nascosto.Tabindex Focus Styles

Attualmente quando si fa clic con il mouse, lo div ottiene lo stile del browser :focus.

C'è un modo per avere quell'elemento tabbable per avere lo stile di messa a fuoco quando si accede tramite la tastiera? Un elemento di ancoraggio ha questo di default.

Div con tabindex='0' ottiene stili di messa a fuoco del browser su mouse e tastiera interazione
Anchor ottiene stili di messa a fuoco del browser sull'interazione tastiera solo

Vorrei il div di emulare l'ancora. Rendendolo un'ancora non è un'opzione, sfortunatamente.

Qualsiasi aiuto sarebbe grande, sono sinceramente in perdita.

Modifica -> Ecco un esempio: http://jsfiddle.net/LvXyL/2/

fonte

2012-04-20 Henry Hoffman

FWIW: Sembra che il comportamento che si sta descrivendo dipenda in realtà dal browser: in Chrome, div ottiene lo stile di messa a fuoco sul mouse/tastiera ma si ancorano solo sulla tastiera come si descrive; ma in IE, * entrambi * ottengono il rettangolo di messa a fuoco sul mouse o sulla tastiera; nel frattempo, in Firefox, non viene visualizzato lo schema di messa a fuoco * finché * non viene utilizzata la tastiera in quel fotogramma e, successivamente, entrambi ottengono il contorno di messa a fuoco sia per il mouse che per la tastiera! – BrendanMcK

-1

Se è possibile utilizzare il javascript, Prova Usa onclick attributo.

onclick="this.blur()" per la perdita di messa a fuoco

onclick="this.focus()" messa a fuoco insieme

Esempio dove DIV al clic perso fuoco e A è impostato attenzione http://jsfiddle.net/LvXyL/6/

svantaggio è stile fuoco visibile se si tiene premuto il tasto del mouse per una più lunga tempo.

fonte

2012-04-20 12:32:45 kubedan

Grazie per la risposta, questo è abbastanza vicino, ma l'attenzione rimane sul mouse verso il basso e quando si fa clic e si trascina via l'elemento. –

L'uso di this.blur() non è raccomandato, in quanto interferirà con l'uso corretto della tastiera. Cliccando su un div tabbable * dovrebbe * mettere a fuoco lì, ma l'uso di this.blur() lo impedisce. – BrendanMcK

Certo, basta aggiungere: focus pseudo-classe al div e stile. Raccomando l'uso di outline vs border. Ho aggiornato il violino.

div:focus {outline: blue solid 2px;}

Kub ha suggerito una soluzione JS, ma perché utilizzare js se non è effettivamente necessario?

fonte

2012-04-20 12:36:58

Perché, desidera impostare la messa a fuoco solo con la tastiera e non con il mouse. – kubedan

e cosa succede se il suddetto utente ha disattivato JS? Questo approccio copre mouse e tastiera. –

Se JS è spento, la mia soluzione non funziona, ovviamente. – kubedan

Tabindex Focus Styles

risposta

Problemi correlati