使用 html 按钮按箭头键或直接按下答案

【问题标题】：Press an Arrow key using a html button or simply press it使用 html 按钮按箭头键或直接按下
【发布时间】：2019-08-29 03:33:23
【问题描述】：

我想使用 html 按钮按箭头键。到目前为止，我只发现了触发或模拟事件。

就像在 jquery 中一样，我们有一个 .click() 来点击鼠标，同样我试图为所有箭头键设置一个类似的 arrowUp()。我最终试图在一个角度应用程序中实现这一点。

请帮忙。

更新

需要使用 typescript/javascript 触发向上箭头键或 F1 键事件，例如 .click()。

如果触发了 F1 键事件，它应该会打开某种 Windows 帮助选项卡。因此，在页面中，如果触发了向上或向下箭头键，则页面应相应地向上或向下滚动。

【问题讨论】：

api.jquery.com/keyup 是您所说的 .click() 的 jquery 键盘版本，但如果您能详细解释一下您要做什么以及为什么？
你想模拟一个按键并让它触发吗？？
我正在尝试以编程方式按“F1”或任何类型的键盘按钮。

标签： javascript angular typescript

【解决方案1】：

在 Angular 中，您需要使用 ViewChild 将 html 按钮绑定到变量

<button #myButton>

在控制器中

@ViewChild('myButton')
myButton: ElementRef;

然后就可以调用事件了

const event = new KeyboardEvent('keydown',{ 'which': '40'}); //down
this.myButton.nativeElement.dispatchEvent(event);

您可以为箭头使用不同的键码：

37-左 38 岁以上 39-右 40-下

工作小提琴：https://jsfiddle.net/pwmcfgkn/4/

【讨论】：

Keyboardevent 没有被 Angular 中的 keycode 参数触发。
你有那个元素或窗口的事件监听器吗？您可以改用 keydown 事件。你需要监听器和触发事件。
嘿，谢谢，这行得通，但是像 ArrowUp 这样的键盘事件并没有在网页中被触发。例如，我想通过自动化键盘事件来控制游戏。
向上箭头的键码是 38，它应该以相同的方式工作，你如何触发它取决于你如何实现游戏我很乐意提供帮助，你能标记为正确吗？
我用112和38都试过了，能听但是不行，按F1或112时，默认是在Win10打开一个新的帮助标签。

【解决方案2】：

Angular 有一个内置的键侦听器事件处理程序，如 here，但它似乎仅限于几个键，如 Github Page 中所述的 Enter、Shift Control

但是，您可以使用 HTML 的强大按键事件处理程序，例如

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

  switch (event.key) {
    case "Down": // IE/Edge specific value
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      // Do something for "up 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);

这个例子可以在here找到，完整的按键列表，包括箭头键here

【讨论】：

这只监听事件，它不会以编程方式触发它。