Question

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

Answer 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

Answer 2

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

KEYDOWN
按键
KEYUP

大多数浏览器都可以在HTML节点上收听所有内容。

Webkit也支持......

为textInput

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

Answer 3

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

＆＃13;

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

＆＃13;

Answer 4

使用JQuery keydown事件。

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

在JS中；键盘键由Javascript keycodes

标识

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

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

5 个答案: