Wiążące klawisze strzałek w JS/jQuery

Question

Jak uzyskać powiązanie funkcji z lewymi i prawymi strzałkami w JavaScript i/lub jQuery? Spojrzałem na wtyczkę js-hotkey dla jQuery (zawija wbudowaną funkcję bind, aby dodać argument rozpoznawania określonych kluczy), ale nie obsługuje klawiszy strzałek.

Answer 1

$(document).keydown(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) 
}); 

umieścić swój kod niestandardowy dla klawiszy strzałek pomiędzy odpowiadającymi case i break linii.

e.which jest znormalizowany przez jQuery, więc działa we wszystkich przeglądarkach. Dla czystego podejścia JavaScript, wymienić pierwsze z dwóch linii:

document.onkeydown = function(e) { 
    e = e || window.event; 
    switch(e.which || e.keyCode) { 

(edycja 2017)
Jeśli czujesz fantazyjne, można wykorzystać e.key zamiast e.which lub e.keyCode teraz. e.key staje się zalecanym standardem, umożliwiając sprawdzanie ciągów znaków: 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'. Nowe przeglądarki obsługują je natywnie, check here.

Answer 2

$(document).keydown(function(e){ 
    if (e.keyCode == 37) { 
     alert("left pressed"); 
     return false; 
    } 
}); 

kody Charakter:

37 - left

38 - up

39 - right

40 - down

Answer 3

Można używać keyCode z klawiszy strzałek (37, 38, 39 i 40 w lewo, w górę, w prawo iw dół):

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

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

Sprawdź powyższy przykład here.

Answer 4

Czy na pewno program jQuery.HotKeys nie obsługuje klawiszy strzałek? Zdarzyło mi się, że robiłem demo i obserwowałem je w lewo, w prawo, w górę i w dół, gdy testowałem w IE7, Firefox 3.5.2 i Google Chrome 2.0.172 ...

EDIT: jquery.hotkeys został przeniesiony do Github: https://github.com/jeresig/jquery.hotkeys

Answer 5

Trochę za późno, ale HotKeys ma bardzo poważny błąd, który powoduje, że zdarzenia są wykonywane wielokrotnie, jeśli do elementu zostanie dołączony więcej niż jeden skrót. Po prostu użyj zwykłego jQuery.

$(element).keydown(function(ev) { 
    if(ev.which == $.ui.keyCode.DOWN) { 
     // your code 
     ev.preventDefault(); 
    } 
}); 

Answer 6

Zamiast return false; jak w przykładach powyżej, można użyć e.preventDefault(); który robi to samo, ale jest łatwiejsze do zrozumienia i odczytania.

Answer 7

ja po prostu łączy najlepsze kawałki 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(); 
}); 

Answer 8

Można użyć KeyboardJS. Napisałem bibliotekę do zadań podobnych do tego.

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'); }); 

Zamówienie biblioteka tutaj =>http://robertwhurst.github.com/KeyboardJS/

Answer 9

lakoniczny rozwiązanie przy użyciu zwykłego Javascript (dzięki Sygmoral proponowanych usprawnień):

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

zobaczyć również https://stackoverflow.com/a/17929007/1397061.

Answer 10

Można użyć jQuery wiąże:

$(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'); 
    } 
}); 

Answer 11

Przy kawie & 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() 

Answer 12

Można sprawdzić pogoda w arrow key zostanie naciśnięty przez:

$(document).keydown(function(e){ 
    if (e.keyCode > 36 && e.keyCode < 41) { 
     alert("arrowkey pressed"); 
     return false; 
    } 
}); 

Answer 13

zapobiec strzałkę dostępne tylko dla jakikolwiek inny obiekt WYBIERZ, a właściwie nie mam innego obiekt LOL. , ale może zatrzymać zdarzenie ze strzałką na stronie i typie wejścia.

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

Answer 14

Solidna biblioteka JavaScript do przechwytywania wprowadzonych klawiszy i wprowadzonych kombinacji klawiszy. Nie ma żadnych 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 
    } 
}); 

Answer 15

Przyjechałem tu szuka prosty sposób, aby użytkownik, gdy koncentruje się na wejściu, za pomocą klawiszy strzałek do +1 lub -1 wejście numerycznej. Nigdy nie znalazłem dobrej odpowiedzi, ale napisałem poniższy kod, który wydaje się działać świetnie - teraz robię to w całej witrynie.

$("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); 
    } 
}); 

Answer 16

Przykład czystych js z wyjazdem 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) { 

      } 
     });