Tabindex Focus Style

Dokonałem tabulatora div z atrybutem tabindex, aby udostępnić ukrytą zawartość.Tabindex Focus Style

Obecnie po kliknięciu myszą div uzyskuje wygląd przeglądarki :focus.

Czy istnieje sposób, aby ten element tablicowy miał styl fokusowania , gdy można uzyskać do niego dostęp za pomocą klawiatury? Element zakotwiczający ma to domyślnie.

Div z tabindex='0' dostaje style ostrości przeglądarkę na myszy i klawiatury interakcji
Kotwica dostaje style ostrości przeglądarki interakcji klawiatury tylko

Chciałbym div do emulowania kotwicę. Stworzenie kotwicy niestety nie jest opcją.

Każda pomoc byłaby świetna, naprawdę nie jestem w stanie tego zrobić.

Edit -> Oto przykład: http://jsfiddle.net/LvXyL/2/

Źródło

2012-04-20 Henry Hoffman

FWIW: Wygląda na to, że opisywane przez ciebie zachowanie zależy od przeglądarki: w przeglądarce Chrome div uzyskuje styl fokusu na myszy/klawiaturze, ale zakotwicza się tylko na klawiaturze podczas opisywania; ale w IE * oba * otrzymują prostokąt skupienia na myszy lub klawiaturze; tymczasem w Firefoksie nie dostaję konspektu * do * kiedy klawiatura jest używana w tej ramce, a potem obie uzyskują kontur ostrości dla myszy i klawiatury! – BrendanMcK

-1

Jeśli można użyć javascript, spróbuj użycia onclick atrybut.

onclick="this.blur()" stracony naciskiem

onclick="this.focus()" dla ustawionej ostrości

Przykład gdzie DIV na click stracił ostrość i A się uaktywnić http://jsfiddle.net/LvXyL/6/

wadą jest widoczny nacisk styl jeśli przytrzymaj klawisz myszy na dłuższy czas.

Źródło

2012-04-20 12:32:45 kubedan

Dzięki za odpowiedź, jest całkiem blisko, ale fokus pozostaje na myszy w dół i po kliknięciu i przeciągnięciu elementu. –

Używanie this.blur() nie jest zalecane, ponieważ może zakłócać prawidłowe używanie klawiatury. Kliknięcie tabbable div * powinno * ustawić fokus tam, ale użycie this.blur() zapobiega temu. – BrendanMcK

Oczywiście po prostu dodaj pseudoklasy: focus do div i style. Polecam używanie konturu kontra obramowania. Zaktualizowałem skrzypce.

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

Kub zaproponował rozwiązanie JS, ale po co używać js, jeśli tak naprawdę nie trzeba?

Źródło

2012-04-20 12:36:58

Ponieważ chce ustawić ostrość tylko za pomocą klawiatury, a nie myszy. – kubedan

i co się stanie, jeśli dany użytkownik ma wyłączony JS? Podejście to obejmuje mysz i klawiaturę. –

Jeśli JS jest wyłączone, moje rozwiązanie nie działa, oczywiście. – kubedan

Odpowiedz

Powiązane problemy