如何在 JavaScript 中接受键盘输入？答案

【问题标题】：How to take keyboard input in JavaScript?如何在 JavaScript 中接受键盘输入？
【发布时间】：2011-05-23 22:09:43
【问题描述】：

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

【问题讨论】：

这是在浏览器中完成的吗？如果是这样，您可以捕获键盘事件。

【解决方案1】：

您可以通过registering an event handler 对文档或您想要观察击键的任何元素执行此操作并检查key related properties of the event object。

适用于 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

【讨论】：

我可以做些什么来捕获 Backspace 但阻止浏览器“返回”？
@Vitimtk：对不起，我现在真的没有时间，但是看看这些问题：stackoverflow.com/…
使用 event.preventDefault() 可能是你想要的。顾名思义，它可以防止给定事件的任何默认行为，在本例中为退格键盘事件。这更详细：stackoverflow.com/questions/1495219/…
keyCode 已弃用 developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

【解决方案2】：

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

按键
按键
键位

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

Webkit 还支持...

文本输入

查看更多详情..http://unixpapa.com/js/key.html

【讨论】：

【解决方案3】：

您应该在窗口或任何您想观察击键的元素上注册一个事件处理程序，并使用标准的key values 而不是 keyCode。来自MDN 的修改后的代码将在按下左、右、上或下箭头键时响应 keydown：

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

【讨论】：

我似乎能够检测到正常的字母数字键，但不能检测到箭头键（Safari / MacOS）。
我必须在 Chrome 上使用它，这非常棒。非常感谢。

【解决方案4】：

使用JQuery keydown 事件。

$(document).keypress(function(){
    if(event.which == 70){  //f
        console.log("You have payed respect");
    }
});

在 JS 中；键盘按键由Javascript keycodes标识

【讨论】：

【解决方案5】：

由于 event.keyCode 已被弃用，我发现 event.key 在 javascript 中很有用。下面是获取按下的键盘键名称的示例（使用输入元素）。它们作为 KeyboardEvent 键文本属性给出：

function setMyKeyDownListener() {
    window.addEventListener(
      "keydown",
      function(event) {MyFunction(event.key)}
    )
}

function MyFunction (the_Key) {
    alert("Key pressed is: "+the_Key);
}

html { font-size: 4vw; background-color: green; color: white; padding: 1em; }

<body onload="setMyKeyDownListener()">
    <div>
        <input id="MyInputId">
    </div>
</body>
</html>

【讨论】：