+1 tabindex jest tutaj kluczowym punktem, aby uczynić div „wybieralnym”. JQuery nie jest konieczne, to samo działa z Angularem, jak również (jak sądzę) ze zwykłymi zdarzeniami javascript.
Jukka Dahlbom,
4
Jaka jest w tym obsługa przeglądarki?
knownasilya
27
Tabindex jest kluczową częścią, ale nie ustawiaj jej na żadną wartość inną niż „0”. Zmiana wartości powyżej 0 zepsuje czytniki ekranu dla niedowidzących użytkowników (pominie wszystko na stronie i przejdzie bezpośrednio do dowolnego tabindeksu powyżej 0). tabindex = "0" sprawia, że jest "tabbable". możesz mieć nieskończone elementy z tabindex = "0"
zonabi
2
Działa również z <pre>!
dfmiller
2
Doskonały! Brakowało mi atrybutu tabindex, być może dlatego, że DIV nie może uzyskać fokusu, chyba że mają tabindex. Dzięki! Uratował mi życie! EDYCJA: działa również z React
Atrybut tabindex HTML wskazuje, czy na jego elemencie można skupić się i czy / gdzie uczestniczy w sekwencyjnej nawigacji po klawiaturze (zwykle za pomocą Tabklawisza). Przeczytaj dokumentację MDN, aby uzyskać pełne informacje.
Naprawdę znalazłem to, szukając problemu z uruchamianiem zdarzenia focusout, gdy elementy sterujące na div stracił fokus, mówiąc, aby kliknąć pasek przewijania div, po prostu dodanie tabulatora do div było rozwiązaniem, więc bardzo dziękuję
Odpowiedzi:
(1) Ustaw
tabindex
atrybut:(2) Powiązanie z keydown:
Aby ustawić fokus na początku:
Aby usunąć - jeśli ci się nie podoba -
div
obramowanie fokusu, ustawioneoutline: none
w CSS.Zobacz tabelę kodów klawiszy, aby uzyskać więcej
keyCode
możliwości.Cały kod przy założeniu, że używasz jQuery.
#źródło
Tutaj przykład na zwykłym JS:
źródło
Atrybut tabindex HTML wskazuje, czy na jego elemencie można skupić się i czy / gdzie uczestniczy w sekwencyjnej nawigacji po klawiaturze (zwykle za pomocą
Tab
klawisza). Przeczytaj dokumentację MDN, aby uzyskać pełne informacje.Korzystanie z Jquery
Pokaż fragment kodu
Korzystanie z JavaScript
Pokaż fragment kodu
źródło