如何在 JavaScript 中获取键盘输入?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4416505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 12:19:49  来源:igfitidea点击:

How to take keyboard input in JavaScript?

javascript

提问by Hick

I want to take keyboard input in JavaScript, where arrow keys, when pressed, will result in the change in shape of a particular shape. How do I take the input of any of the keys in JavaScript?

我想在 JavaScript 中进行键盘输入,其中箭头键在按下时会导致特定形状的形状发生变化。如何获取 JavaScript 中任何键的输入?

回答by Felix Kling

You can do this by registering an event handleron the document or any element you want to observe keystrokes on and examine the key related properties of the event object.

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

Example that works in FF and Webkit-based browsers:

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

演示

回答by exd5cxd4

You should register an event handler on the window or any element that you want to observe keystrokes on, and use the standard key valuesinstead of keyCode. This modified code from MDNwill respond to keydown when the left, right, up, or down arrow keys are pressed:

您应该在窗口或您想要观察击键的任何元素上注册一个事件处理程序,并使用标准键值而不是 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

回答by ocodo

If you are doing this in a browser, you can capture keyboard events.

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

  • keydown
  • keypress
  • keyup
  • 按键
  • 按键
  • 按键

Can all be listened to on HTML nodes in most browsers.

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

Webkit also supports...

Webkit 还支持...

  • textInput
  • 文本输入

See for more details .. http://unixpapa.com/js/key.html

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

回答by mondlos

Use JQuery keydownevent.

使用JQuery 按键事件。

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

In JS; keyboard keys are identified by Javascript keycodes

在JS中;键盘键由Javascript 键码标识