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

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

---

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

---

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

화살표 키에 대한 사용자 정의 코드를 해당 행 case과 break행 사이에 넣으십시오 .

e.whichjQuery에 의해 정규화되므로 모든 브라우저에서 작동합니다. 순수한 자바 스크립트 접근 방식의 경우 처음 두 줄을 다음으로 바꿉니다.

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

(편집 2017)
당신이 공상을 느끼는 경우에, 당신이 사용할 수있는 e.key대신에 e.which또는 e.keyCode지금. e.key, 권장되는 표준이되는 당신이 문자열에 대해 확인 할 수있다 : 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'. 새로운 브라우저는 기본적으로 지원합니다 . 여기를 확인하십시오 .

---

$(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 도 참조 하십시오 .

---

jQuery.HotKeys가 화살표 키를 지원하지 않습니까? IE7, Firefox 3.5.2 및 Chrome 2.0.172에서 테스트했을 때 왼쪽, 오른쪽, 위 및 아래로 작동하는 것을 관찰하기 전에 데모를 엉망으로 만들었습니다.

편집 : jquery.hotkeys가 Github로 재배치 된 것으로 보입니다 : https://github.com/jeresig/jquery.hotkeys

---

return false;위의 예에서와 같이 사용하는 대신 e.preventDefault();동일하지만 이해하고 읽기 쉬운 것을 사용할 수 있습니다 .

---

오른쪽 또는 왼쪽으로 이동하는 순수한 js의 예

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

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

            }
        });

---

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

---

다음을 통해 arrow key눌림 여부를 확인할 수 있습니다 .

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

---

다른 객체 선택에 대해서만 화살표를 사용할 수 없도록하십시오. 실제로 다른 객체 LOL을 테스트하지 않았습니다. 그러나 페이지 및 입력 유형에서 화살표 이벤트를 중지 할 수 있습니다.

"kepress" "keydown"및 "keyup"이벤트에서 "e.preventDefault ()"또는 "return false"를 사용하여 SELECT 객체의 값을 변경하기 위해 화살표를 좌우로 차단하려고 시도했지만 여전히 객체 값을 변경합니다. 그러나 이벤트는 여전히 화살표를 눌렀 음을 알려줍니다.

---

키보드 입력 및 입력 된 키 조합을 캡처하기위한 강력한 Javascript 라이브러리 종속성이 없습니다.

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

---

입력에 집중할 때 화살표 키를 사용하여 숫자 입력을 +1 또는 -1하는 간단한 방법을 찾고 왔습니다. 나는 좋은 대답을 찾지 못했지만 다음 코드를 훌륭하게 작동시켜 사이트 전체에 적용했습니다.

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

---

커피와 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()

참고 URL : https://stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery