[JQUERY] JS / jQuery를 화살표 키에 바인딩

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

해결법

1. ---

   1.

   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을 지원해야하는 경우, 전자 = 전자로 함수 본문을 시작 || window.event를; 스위치 (e.which || e.keyCode) {.

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

2. ---

   2.

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

   문자 코드 :

3. ---

   3.당신은 화살표 키 (37, 38, 39 및 40 좌를 위해, 위, 오른쪽 아래)의 키 코드를 사용할 수 있습니다 :

   당신은 화살표 키 (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;
     }
   });
   

   여기에 위의 예를 확인하십시오.

4. ---

   4.이것은 조금 늦게, 그러나 바로 가기 키는 요소에 두 개 이상의 단축키를 첨부 할 경우 이벤트가 여러 번 실행 얻을 원인이되는 매우 중요한 버그가 있습니다. 그냥 일반 jQuery를 사용합니다.

   이것은 조금 늦게, 그러나 바로 가기 키는 요소에 두 개 이상의 단축키를 첨부 할 경우 이벤트가 여러 번 실행 얻을 원인이되는 매우 중요한 버그가 있습니다. 그냥 일반 jQuery를 사용합니다.

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

5. ---

   5.단순히 다른 답변에서 최상의 비트를 결합했습니다 :

   단순히 다른 답변에서 최상의 비트를 결합했습니다 :

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

6. ---

   6.당신은 KeyboardJS를 사용할 수 있습니다. 난 그냥이 같은 작업을 위해 라이브러리를 썼다.

   당신은 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/

7. ---

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

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

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

   또한 https://stackoverflow.com/a/17929007/1397061를 참조하십시오.

8. ---

   8.당신은 확실히 jQuery.HotKeys 화살표 키를 지원하지 않습니다 있습니까? 내가 전에 자신의 데모와 주변 엉망했고, 오른쪽, 위, 나는 IE7, 파이어 폭스 3.5.2, 구글 크롬 2.0.172에서 테스트 할 때 작업 아래, 왼쪽 관찰 ...

   당신은 확실히 jQuery.HotKeys 화살표 키를 지원하지 않습니다 있습니까? 내가 전에 자신의 데모와 주변 엉망했고, 오른쪽, 위, 나는 IE7, 파이어 폭스 3.5.2, 구글 크롬 2.0.172에서 테스트 할 때 작업 아래, 왼쪽 관찰 ...

   편집 : 그것은 jquery.hotkeys 나타난다는 Github에서에 이전되었습니다 https://github.com/jeresig/jquery.hotkeys

9. ---

   9.대신 반환 거짓을 사용; 위의 예와 같이, 당신은 e.preventDefault ()를 사용할 수 있습니다; 의 같은 않지만 이해하고 쉽게 읽을 수 있습니다.

   대신 반환 거짓을 사용; 위의 예와 같이, 당신은 e.preventDefault ()를 사용할 수 있습니다; 의 같은 않지만 이해하고 쉽게 읽을 수 있습니다.

10. ---

    10.오른쪽 또는 왼쪽으로가는 순수 JS의 예

    오른쪽 또는 왼쪽으로가는 순수 JS의 예

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

11. ---

    11.당신은 jQuery를 바인딩을 사용할 수 있습니다 :

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

12. ---

    12.당신은 화살표 키에 의해 가압되어 있는지 여부를 확인할 수 있습니다 :

    당신은 화살표 키에 의해 가압되어 있는지 여부를 확인할 수 있습니다 :

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

13. ---

    13.방지는 물론 사실은 내가 다른 객체 LOL에 대한 검사를하지 않은 어떤 다른 목적 SELECT에만 사용할 수 화살표. 하지만 페이지 및 입력 유형에 화살표 이벤트를 중지 할 수 있습니다.

    방지는 물론 사실은 내가 다른 객체 LOL에 대한 검사를하지 않은 어떤 다른 목적 SELECT에만 사용할 수 화살표. 하지만 페이지 및 입력 유형에 화살표 이벤트를 중지 할 수 있습니다.

    난 이미 왼쪽 화살표를 차단하려고 오른쪽 "e.preventDefault ()"또는 "kepress"의 "반환 false"로 "를 keyDown"와 "의 keyup"이벤트를 사용하여 SELECT 객체의 값을 변경하지만 여전히 객체의 값을 변경합니다. 그러나 사건은 여전히 ​​화살표를 누른 사실을 알려줍니다.

14. ---

    14.키보드 입력 및 키 조합을 캡처하는 강력한 자바 스크립트 라이브러리에 들어갔다. 그것은 종속성이 없습니다.

    키보드 입력 및 키 조합을 캡처하는 강력한 자바 스크립트 라이브러리에 들어갔다. 그것은 종속성이 없습니다.

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

15. ---

    15., 입력에 집중 +1 또는 -1 숫자 입력에 화살표 키를 사용했을 때, 사용자를 할 수있는 간단한 방법을 찾고 여기에왔다. 나는 좋은 대답을 발견하지만, 작업 좋은 것 같다 다음 코드를 만든 적이 - 지금이 전체 사이트를 만드는.

    , 입력에 집중 +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);
        }
    }); 
    

16. ---

    16.커피 & jQuery로

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

from https://stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery by cc-by-sa and MIT license