检测 JavaScript 中的箭头键按下

Question

如何检测何时按下了其中一个箭头键？ 我用这个来找出：

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

虽然它适用于所有其他键，但它不适用于箭头键（可能是因为浏览器默认应该在这些键上滚动）。

Answer 1

箭头键只能由onkeydown触发，而不是onkeypress 。

密钥代码是：

• 左 = 37
• 向上 = 38
• 右 = 39
• 向下 = 40

Answer 2

上键上下调用功能。 每个键都有不同的代码。

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
    }

}

Answer 3

event.key === "ArrowRight"...

更新更干净：使用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会，对德沃夏克和z上AZERTY，让您的游戏不能玩。

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

最理想的情况是，您还允许重新映射密钥，无论玩家处于何种情况，这都会使他们受益。

PS event.code与箭头相同

key Mozilla 文档

code Mozilla 文档

支持的浏览器

Answer 4

可能是最简洁的公式：

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.which、e.charCode 和 window.event 而不是 e），但它们不是必需的。 您可以在http://www.asquare.net/javascript/tests/KeyCode.html 上尝试其中的大部分。 请注意 event.keycode 不适用于 Firefox 中的 onkeypress，但它适用于 onkeydown。

Answer 5

对不可打印的键（例如箭头键）使用keydown ，而不是keypress ：

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

document.onkeydown = checkKey;

我找到的最好的 JavaScript 关键事件参考（例如，在 quirksmode 中击败裤子）在这里： http : //unixpapa.com/js/key.html

Answer 6

现代答案，因为现在不推荐使用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
    }
};

Answer 7

我相信最近的方法是：

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(); 行 if 按键，包括由该处理程序捕获的按键仍应处于活动状态。

Answer 8

这是一个示例实现：

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

Answer 9

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;

Answer 10

这是我如何做到的：

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.
}

Answer 11

我已经能够用 jQuery 捕获它们：

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

一个例子： http : //jsfiddle.net/AjKjU/

Answer 12

这是 chrome 和 firefox 的工作代码

<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>

Answer 13

我也在寻找这个答案，直到我看到这篇文章。

我找到了另一种解决方案来了解不同键的键码，以解决我的问题。 我只是想分享我的解决方案。

只需使用 keyup/keydown 事件在控制台/警报中使用event.keyCode写入值。 喜欢-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- 鲁帕姆

Answer 14

那更短。

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

Answer 15

这个图书馆太棒了！ https://craig.is/killing/mice

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

不过，您需要快速按下序列以突出显示该页面中的代码。

Answer 16

重新回答您需要keydown而不是keypress 。

假设您想在按下键时连续移动某些内容，我发现keydown适用于除 Opera 之外的所有浏览器。 对于 Opera， keydown仅在第一次按下时触发。 为了适应 Opera 使用：

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

Answer 17

箭头键在keyup上触发

$(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, shit

onkeyup 允许制表符、向上箭头、向下箭头、向左箭头、向下箭头

Answer 18

带钥匙和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>

Answer 19

如果你使用 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');
    }
 });

Answer 20

控制键码%=37和&=38 ... 并且只有方向键 left=37 up=38

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

Answer 21

如果您想检测箭头按键但不需要特定于 Javascript

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