[javascript] JS / jQuery에서 화살표 키 바인딩

Javascript 및 / 또는 jQuery에서 왼쪽 및 오른쪽 화살표 키에 함수를 바인딩하는 방법은 무엇입니까? jQuery 용 js-hotkey 플러그인을 보았습니다 (특정 키를 인식하기 위해 인수를 추가하기 위해 내장 바인드 함수를 래핑했습니다).하지만 화살표 키를 지원하지 않는 것 같습니다.



답변

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

IE8을 지원해야하는 경우 함수 본문을로 시작하십시오 e = e || window.event; switch(e.which || e.keyCode) {.

(편집 2020)
참고 KeyboardEvent.which지금은 사용되지 않습니다. 화살표 키를 감지하는보다 현대적인 솔루션을 사용하여이 예제를KeyboardEvent.key 참조하십시오 .


답변

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

문자 코드 :

37-왼쪽

38-위로

39-오른쪽

40-아래로


답변

화살표 키의 keyCode를 사용할 수 있습니다 (왼쪽, 위, 오른쪽 및 아래의 경우 37, 38, 39 및 40).

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

위의 예를 확인 하십시오 .


답변

이것은 약간 늦었지만 핫키에는 매우 큰 버그가있어 하나 이상의 핫키를 요소에 연결하면 이벤트가 여러 번 실행됩니다. 일반 jQuery를 사용하십시오.

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


답변

나는 단순히 다른 답변에서 최고의 비트를 결합했습니다.

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


답변

KeyboardJS를 사용할 수 있습니다. 나는 이와 같은 작업을 위해 라이브러리를 작성했습니다.

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

라이브러리를 확인하십시오 => http://robertwhurst.github.com/KeyboardJS/


답변

일반 자바 스크립트를 사용하는 간결한 솔루션 (제안 된 개선을 위해 Sygmoral에 감사) :

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

https://stackoverflow.com/a/17929007/1397061 도 참조 하십시오 .