如何在JavaScript中输入键盘输入？

Question

我想在JavaScript中使用键盘输入,其中箭头键在按下时将导致特定形状的形状发生变化.如何获取JavaScript中任何键的输入？

Answer 1

您可以通过在文档或要观察键击的任何元素上注册事件处理程序来执行此操作,并检查事件对象的关键相关属性.

在FF和基于Webkit的浏览器中有效的示例:

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) {
        alert('Left was pressed');
    }
    else if(event.keyCode == 39) {
        alert('Right was pressed');
    }
});

DEMO

Answer 2

如果您在浏览器中执行此操作,则可以捕获键盘事件.

• KEYDOWN
• 按键
• KEYUP

在大多数浏览器中都可以在HTML节点上收听.

Webkit还支持......

• 为textInput

有关详细信息,请参阅.. http://unixpapa.com/js/key.html

Answer 3

您应该在窗口或要观察其击键的任何元素上注册事件处理程序，并使用标准键值而不是keyCode。当按下向左，向右，向上或向下箭头键时，此MDN修改后的代码将响应按键按下：

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // code for "down arrow" key press.
      break;
    case "ArrowUp":
      // code for "up arrow" key press.
      break;
    case "ArrowLeft":
      // code for "left arrow" key press.
      break;
    case "ArrowRight":
      // code for "right arrow" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);
// the last option dispatches the event to the listener first,
// then dispatches event to window