Wiązanie klawiszy strzałek w JS / jQuery

418

Jak mogę powiązać funkcję z klawiszami lewej i prawej strzałki w JavaScript i / lub jQuery? Spojrzałem na wtyczkę js-hotkey dla jQuery (otacza wbudowaną funkcję wiązania, aby dodać argument do rozpoznawania określonych kluczy), ale wydaje się, że nie obsługuje klawiszy strzałek.

Alex S.
źródło

Odpowiedzi:

541
document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};

Jeśli potrzebujesz obsługi IE8, uruchom ciało funkcji jako e = e || window.event; switch(e.which || e.keyCode) {.


(edycja 2020)
Uwaga: KeyboardEvent.whichobecnie jest przestarzała. Zobacz ten przykład, używającKeyboardEvent.key bardziej nowoczesnego rozwiązania do wykrywania klawiszy strzałek.

Sygmoral
źródło
28
Zdecydowanie najlepsza odpowiedź. Używae.which takich jak zalecenia jQuery dla różnych przeglądarek, używa e.preventDefault()zamiast return false( return falsew programie obsługi zdarzeń jQuery wyzwala oba e.preventDefault()i e.stopPropagation()drugie z nich spowoduje, że wszelkie później dodane zdarzenia zakończą się niepowodzeniem, ponieważ zdarzenie nie zostanie do nich propagowane), i na koniec przełącznika, wróci bez dzwonienia, e.preventDefault()jeśli jest to inny klucz niż szukany, aby nie utrudniać użycia innego klucza, i zamiast $.ui.keyCode.DOWNtego porównuje się z numerami (DUŻO szybciej).
Jimbo Jonny
2
Nathan: wydaje się, że nie wszystkie kody klawiszy są spójne w przeglądarkach, ale klawisze strzałek to niektóre z nich. Zobacz tutaj: stackoverflow.com/questions/5603195/...
Sygmoral 18.09.13 o
1
@MichaelScheper - 1) zmienne! = Stałe, niezależnie od tego, czy mają one zostać zmienione ... silnik nadal musi traktować je jak zmienne, dopóki stałe ES6 nie będą na tyle wszechobecne, że jQuery może używać stałych 2) liczby nie są naprawdę magiczne liczby, gdy tuż obok nich znajduje się komentarz mówiący dokładnie, czym one są, i 3) ... ciąg dalszy
Jimbo Jonny
2
... 3) podczas uzyskiwania dostępu $.ui.keyCode.DOWNszukasz $w zakresie leksykalnym, nie znajdując go, wchodząc na wyższy poziom ... szukając $, powtarzaj, aż w zakresie globalnym, znajdź go w globalnym window, dostęp $do okna, dostępui do window.$, dostęp keyCodedo window.$.uidostęp DOWNon window.$.ui.keyCodedostać się do pierwotnej wartości, które chcesz porównać, a następnie zrobić rzeczywiste porównanie. Niezależnie od tego, czy ta prędkość ma dla ciebie znaczenie, jest osobistą decyzją, po prostu mam tendencję do unikania 4 poziomów dostępu, gdy istnieje sytuacja, w której równie łatwo mogę napisać / skomentować prymitywne.
Jimbo Jonny
1
@NathanArthur Tutaj znalazłem dwa dobre narzędzia online do testowania kodów klawiszy: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Riccardo Volpe
451
$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Kody znaków:

37 - lewo

38 - więcej

39 - prawda

40 - w dół

Josh
źródło
4
Czy istnieje jakiś cel zwrotu?
Alex S
19
Zapobiega trafianiu kolejnych zdarzeń keydown.
s_hewitt
9
Shadow: nie, oznacza to, że powstrzymuje to zdarzenie keydown przed uruchomieniem innych elementów DOM
JasonWoof,
3
Tyle że 39 to także apostrof, prawda?
Paul D. Waite,
25
Korzystając z jQuery, używaj e.whichraczej niż e.keyCodedo większej obsługi przeglądarki. Zobacz mój komentarz poniżej.
Sygmoral,
108

Możesz użyć keyCode klawiszy strzałek (37, 38, 39 i 40 dla lewo, góra, prawo i dół):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Sprawdź powyższy przykład tutaj .

CMS
źródło
1
Nie jestem pewien, czy używasz || operator w wierszu 2. Czy wartość inna niż zero lub niezerowa implementacja nie jest specyficzna i nie jest gwarantowana? Chciałbym użyć czegoś więcej: var keyCode = (e.keyCode? E.keyCode: e.which); +1 za użycie obiektu strzałki do nadania nazwom czytelnych nazw.
Mnebuerquo,
6
Jeśli używasz jQuery, nie musisz testować e.which: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM
Próbuję umieścić kluczowy detektor zdarzeń na stole, ale to nie zadziała. Czy istnieje ograniczona liczba typów selektorów, które obsługują detektory kluczowych zdarzeń?
Arman Bimatov
23

Jest to trochę za późno, ale HotKeys ma bardzo poważny błąd, który powoduje, że zdarzenia są wykonywane wielokrotnie, jeśli do elementu podłączysz więcej niż jeden skrót. Wystarczy użyć zwykłego jQuery.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});
mackstann
źródło
2
+1 za korzystanie z obiektu kodu klucza interfejsu użytkownika. Znacznie łatwiejsze do zrozumienia niż 37, 38, 39 lub 40. Nie jestem pewien, dlaczego najlepsza odpowiedź używa e.keyCode, skoro dokumentacja jQuery wyraźnie stwierdza, że ​​należy używać e.ich, które uwzględniają różnice w przeglądarce. Mam nadzieję, że ta odpowiedź zyska większe uznanie za robienie tego dobrze.
Brak,
2
Używanie $ .ui.keyCode.DOWN na każdym naciśnięciu klawisza jest DUŻO wolniejsze niż używanie cyfry. Po prostu dodaj komentarz, jeśli martwisz się o przejrzystość, zwłaszcza, że ​​musi być uruchamiany za każdym razem, gdy zostanie naciśnięty dowolny klawisz.
Jimbo Jonny
16

Po prostu połączyłem najlepsze fragmenty z innych odpowiedzi:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});
matowe oparzenia
źródło
1
Skąd pochodzi „ui”? Uzyskiwanie komunikatu „TypeError: $ .ui jest niezdefiniowany” EDYCJA - brakowało interfejsu użytkownika JQuery. Mam to załadowane - nigdy więcej błędu.
programista
3
Najwyraźniej używa również interfejsu jQuery, który musi mieć to wyliczenie. Nie dodałbym tylko interfejsu użytkownika jQuery, btw.
Jethro Larson,
14

Możesz użyć KeyboardJS. Napisałem bibliotekę dla takich zadań.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Sprawdź bibliotekę tutaj => http://robertwhurst.github.com/KeyboardJS/

Robert Hurst
źródło
14

Krótkie rozwiązanie wykorzystujące zwykły Javascript (dzięki Sygmoral za sugerowane ulepszenia):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Zobacz także https://stackoverflow.com/a/17929007/1397061 .

1 ''
źródło
Prawdopodobnie również warte wiązania przezdocument.addEventListener('keydown', myFunction);
nathanbirrell
9

Czy na pewno jQuery.HotKeys nie obsługuje klawiszy strzałek? Wcześniej pomieszałem z ich wersją demonstracyjną i obserwowałem działanie lewej, prawej, górnej i dolnej części podczas testowania jej w IE7, Firefox 3.5.2 i Google Chrome 2.0.172 ...

EDYCJA : Wygląda na to, że plik jquery.hotkeys został przeniesiony do Github: https://github.com/jeresig/jquery.hotkeys

Pandincus
źródło
Czytałem tam, gdzie napisano, że jest oparty na innej bibliotece, i założyłem, że lista obsługiwanych kluczy jest nadal stosowana.
Alex S
5

Zamiast używać return false;jak w powyższych przykładach, możesz użyć, e.preventDefault();który robi to samo, ale jest łatwiejszy do zrozumienia i czytania.

Gaetan
źródło
4
return false;i e.preventDefault();nie są dokładnie takie same. Zobacz stackoverflow.com/a/1357151/607874
Jose Rui Santos
4

Przykład czystego js z przejściem w prawo lub w lewo

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });
Vince Verhoeven
źródło
3

Możesz użyć wiązania jQuery:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});
Alessandro Pirovano
źródło
2

Możesz sprawdzić, czy arrow keynaciśnięty jest przycisk:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});
suhailvs
źródło
0

strzałka zapobiegająca jest dostępna tylko dla dowolnego innego obiektu WYBIERZ, no cóż, właściwie nie mam tes na innym obiekcie LOL. ale może zatrzymać zdarzenie strzałki na stronie i typ danych wejściowych.

już próbuję zablokować strzałkę w lewo i prawo, aby zmienić wartość obiektu SELECT za pomocą „e.preventDefault ()” lub „return false” na zdarzeniu „kepress”, „keydown” i „keyup”, ale nadal zmienia wartość obiektu. ale wydarzenie wciąż mówi, że strzałka została naciśnięta.

feniksy
źródło
0

Solidna biblioteka JavaScript do przechwytywania danych wprowadzanych z klawiatury i kombinacji klawiszy. Nie ma zależności.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});
小弟 调 调
źródło
0

Przybyłem tutaj, szukając prostego sposobu, aby użytkownik, skupiony na danych wejściowych, używał klawiszy strzałek do +1 lub -1 wprowadzania danych liczbowych. Nigdy nie znalazłem dobrej odpowiedzi, ale stworzyłem następujący kod, który wydaje się działać świetnie - dzięki czemu ten serwis jest teraz dostępny dla całej witryny.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 
Scott
źródło
-1

Z kawą i Jquery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()
Philip
źródło