[javascript] JavaScript에서 화살표 키 누름 감지

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

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 ()를 제거하십시오. 이 핸들러에 의해 포착 된 키를 포함하여 키 누르기가 여전히 활성화되어 있어야합니다.