JavaScript에서 화살표 키 누름 감지

JavaScript에서 화살표 키 누름 감지

화살표 키 중 하나를 눌렀을 때 어떻게 감지합니까?이걸 이용해서 알아냈어요

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

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

화살표 키는 다음에 의해서만 트리거됩니다.onkeydown,것은 아니다.onkeypress.

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

• 왼쪽 = 37
• 업 = 38
• 오른쪽 = 39
• down = 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 === "화살표 오른쪽"...

보다 최신, 보다 깨끗한 사용: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;
}

최신 스위치 처리:

const callback = {
    "ArrowLeft"  : leftHandler,
    "ArrowRight" : rightHandler,
    "ArrowUp"    : upHandler,
    "ArrowDown"  : downHandler,
}[event.key]
callback?.()

메모: 이전 속성(.keyCode그리고..which)는 권장되지 않습니다.

"w", "a", "s", "d"방향, 사용event.code

qwerty/영어 이외의 키보드 레이아웃을 사용하는 사용자를 지원하려면 대신event.code이렇게 하면 문자가 변경되어도 물리적 키 위치가 유지됩니다.

event.key드보락과 아저티에서 게임을 플레이할 수 없게 됩니다.

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

최적의 방법으로 키 재매핑도 허용하여 플레이어의 상황에 관계없이 플레이어에게 유리합니다.

추신.event.code화살표도 마찬가지입니다.

keyMozilla 문서

codeMozilla 문서

지원되는 브라우저

아마도 가장 어려운 공식:

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가 아닌 e.charCode 및 window.event 등)를 취득하는 다른 방법이 있습니다만, 반드시 필요한 것은 아닙니다.대부분의 경우 http://www.asquare.net/javascript/tests/KeyCode.html에서 시험해 볼 수 있습니다.그 이벤트에 주의해 주세요.키코드는 Firefox의 onkey press에서는 동작하지 않지만 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.proventDefault(); 행을 삭제합니다.

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>

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

$(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를 허용합니다.

탭, 위쪽 화살표, 아래쪽 화살표, 왼쪽 화살표, 아래쪽 화살표를 사용할 수 있습니다.

저도 이 글을 보기 전까지 이 답을 찾고 있었어요.

제 문제에 대한 예의로 다른 키의 키코드를 알 수 있는 다른 해결책을 찾았습니다.저는 그저 제 해결책을 공유하고 싶었어요.

Keyup하여 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]);
});

다만, 그 페이지의 코드를 강조 표시하려면 , 시퀀스를 조금 빨리 눌러야 합니다.

'하다'고하세요.keydownkeypress

에서 무언가를 하면, 이 키를 누른 상태에서 이동시킬 수 .keydownOpera를 한 모든 합니다. Opera 우, ,, 、keydown아, 네, 이에요.오페라 ★★★★★★★★★★★★★★★★★★★★:

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

키와 ES6를 사용합니다.

스위치를 할 수 있고, 할 수 .NumLock있습니다.

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>

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 위... 37 = 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
   };
}

언급URL : https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript