Przechwyć naciśnięcie klawisza (lub klawisz w dół) na elemencie DIV

146

Jak uwięzić zdarzenie naciśnięcia klawisza lub naciśnięcia klawisza na elemencie DIV (przy użyciu jQuery)?

Co jest potrzebne, aby skupić się na elemencie DIV?

Lalchand
źródło
2
Co oznacza „skupienie” w przypadku elementu DIV?
Jonathon Faust
1
jboyd inny niż tabulacja do niego, gdy ma tabindex, możesz użyć javascript, aby go znaleźć i wywołać na nim metodę focus.
Brendan Enrick
2
@Lalchand ... czy możesz kiedyś zaakceptować moją odpowiedź? :)
helle

Odpowiedzi:

301

(1) Ustaw tabindexatrybut:

<div id="mydiv" tabindex="0" />

(2) Powiązanie z keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Aby ustawić fokus na początku:

$(function() {
   $('#mydiv').focus();
});

Aby usunąć - jeśli ci się nie podoba - divobramowanie fokusu, ustawione outline: nonew CSS.

Zobacz tabelę kodów klawiszy, aby uzyskać więcej keyCodemożliwości.

Cały kod przy założeniu, że używasz jQuery.

#
piekło
źródło
43
+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
Vinícius Negrão
6

Tutaj przykład na zwykłym JS:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})
#myDiv {
  outline: none;
}
<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Илья Зеленько
źródło
Jak to odpowiada na pytanie?
Poul Bak
5

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.

Korzystanie z Jquery

Korzystanie z JavaScript

nkshio
źródło
1
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ę
MikeT