화살표 키 중 하나를 눌렀을 때 어떻게 감지합니까? 나는 이것을 사용하여 알아 냈습니다.

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

다른 모든 키에서 작동했지만 화살표 키에서는 작동하지 않았습니다 (브라우저가 기본적으로 이러한 키를 스크롤해야하기 때문일 수 있음).

화살표 키를은으로 트리거 onkeydown하지 onkeypress.

키코 드는 다음과 같습니다.

• 왼쪽 = 37
• 최대 = 38
• 오른쪽 = 39
• 아래로 = 40

키 업 및 다운 콜 기능. 각 키마다 다른 코드가 있습니다.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

event.key === "화살표"...

더 최근의 훨씬 더 깨끗한 : use event.key. 더 이상 임의의 숫자 코드가 없습니다! 번역하고 있거나 사용자가 최신 브라우저를 사용하고 있다는 것을 알고 있다면 이것을 사용하십시오!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

자세한 처리 :

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

이를 확인 "w", "a", "s", "d"하거나 다른 키 를 쉽게 확장 할 수 있습니다.

모질라 문서

지원되는 브라우저

PS event.code는 화살표 와 동일

아마도 가장 까다로운 공식 :

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

데모 (사용자 Angus Grant에게 감사드립니다) : http://jsfiddle.net/angusgrant/E3tE6/

브라우저 간 작동해야합니다. 작동하지 않는 브라우저가 있으면 의견을 남겨주십시오.

키 코드 (예 : e.charCode 및 e 대신 window.event)를 얻는 다른 방법이 있지만 필요하지는 않습니다. http://www.asquare.net/javascript/tests/KeyCode.html 에서 대부분을 시험해 볼 수 있습니다 . event.keycode는 Firefox에서 onkeypress와는 작동하지 않지만 onkeydown과는 작동합니다.

화살표 키와 같이 인쇄 할 수없는 키 keydown에는 사용 하지 마십시오 keypress.

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

내가 찾은 최고의 JavaScript 키 이벤트 참조 (예 : quirksmode에서 바지를 치는)는 다음과 같습니다. http://unixpapa.com/js/key.html

keyCode 는 이제 key 를 선호하기 때문에 더 이상 사용되지 않습니다 .

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

가장 최근의 방법은 다음과 같습니다.

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

이것은 개발자가 코드가 페이지의 어느 곳에서나 활성화되기를 원하고 클라이언트는 다른 키 누름을 무시해야한다고 가정합니다. event.preventDefault ()를 제거하십시오. 이 핸들러에 의해 포착 된 키를 포함하여 키 누르기가 여전히 활성화되어 있어야합니다.

function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

구현 예는 다음과 같습니다.

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

내가 한 방법은 다음과 같습니다.

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

나는 jQuery로 그들을 붙잡을 수 있었다 :

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

예 : http://jsfiddle.net/AjKjU/

크롬과 파이어 폭스의 작동 코드입니다.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

나는이 게시물을 발견 할 때 까지이 답변을 찾고있었습니다.

내 문제에 의지하여 다른 키의 키 코드를 알 수있는 다른 솔루션을 찾았습니다. 방금 솔루션을 공유하고 싶었습니다.

keyup / keydown 이벤트를 사용하여 콘솔 / 경고에 값을 쓰십시오 event.keyCode. 처럼-

console.log(event.keyCode) 

// or

alert(event.keyCode)

-루팜

더 짧습니다.

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

이 도서관은 흔들린다! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

그래도 해당 페이지의 코드를 강조 표시하려면 시퀀스를 약간 빠르게 눌러야합니다.

필요 keydown없는 답변을 다시 입력하십시오 keypress.

키를 누른 상태에서 무언가를 계속 움직이고 싶다면 keydownOpera를 제외한 모든 브라우저에서 작동합니다. Opera의 경우 keydown첫 번째 프레스에서만 트리거됩니다. Opera 사용을 수용하려면 :

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

화살표 키는 키 업시 트리거됩니다

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown은 ctrl, alt, shits를 허용합니다

onkeyup은 탭, 위쪽 화살표, 아래쪽 화살표, 왼쪽 화살표, 아래쪽 화살표를 허용합니다

jquery를 사용하면 다음과 같이 할 수도 있습니다.

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });

키 코드 %=37및 &=38...을 제어하고 화살표 키만 left = 37 up = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

화살표 키 누르기를 감지하고 싶지만 Javascript에서 특정하지 않아도되는 경우

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

와 키 와 ES6.

스위치를 사용하지 않고 각 화살표 키에 대해 별도의 기능을 제공하며 NumLock켜져 있을 때 숫자 키패드의 2,4,6,8 키와도 작동 합니다.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});

<p>Click the textarea then try the arrows</p>
<textarea></textarea>