javascript中多个键的组合答案

【问题标题】：Combination of multiple keys in javascriptjavascript中多个键的组合
【发布时间】：2020-04-08 20:30:34
【问题描述】：

我知道有类似的问题，但我找不到答案，我正在尝试创建一个不常见的快捷方式，以便根据特定的键组合执行操作。我没有一个例子，因为我没有实现它，我试图弄清楚我是否可以做到。我有 Ctrl、shift、alt、meta 键的组合，我可以在 javascript 中捕获，我的问题是我想使用像“g”这样的通用键并使其表现得像 Ctrl、shift、alt、meta 等，以便与 F1、F2、F3 键组合以在屏幕上执行带有特定视觉组件的 javascript 函数。一个示例，我打算创建一个快捷方式“Ctrl+1+F1”来在网页中的特定表中执行操作，该网页在 html 上显示多个表。如果可以做到这一点，任何人都可以回答我吗？如果有人可以，我该怎么做？

【问题讨论】：

这个问题很笼统。我会回答是的，您可以像捕获ctrl 键一样捕获g 键。你应该尝试实现一些东西并检查它在哪里阻塞。从那里，我们可以帮助您解决特定问题。
我想您可以跟踪上下按下了哪些键，然后决定是否从那里按下组合。但是为什么不直接使用 Ctrl+F1 呢？键盘上似乎有足够多的键来做几乎任何你想做的事情。事实上，我估计使用四个修饰键的平均键盘组合大约有 200-400 个。
我认为开箱即用是不可能的，但您应该能够通过监听 keydown 和 keyup 事件并跟踪按下的内容和未按下的内容来模拟它.
@AntoniSilvestrovič，因为，我有一个 Ctrl+F1 的组合用于组件上的特定操作，并且由于我在同一页面上可能有多个相同类型的组件，我需要一个第三个键标识具体的组件我将执行该动作，我不打算使用 ctrl、shift、alt，因为这意味着我可以使用的组件数量的限制，也会让用户感到困惑。我的怀疑是因为我打算应用人体工程学，为了做到这一点，我需要创建一个我可以使用的标准，这就是我想使用这种不寻常的按键组合的原因。
@Vilx-，我知道我可以用这两个事件模拟这种行为，问题是，我如何模拟这种行为？

标签： javascript keypress keydown

【解决方案1】：

该算法的大致概述如下：

保留一个Set 类型的变量，该变量将包含所有当前按下的键。每当您收到keydown/keyup 事件时，通过添加/删除任何按下/释放的键来更新该设置。尽可能多地附加事件处理程序 - 例如，在 <body> 标记上，以便您可以捕获页面中发生的所有事情。

然后在keydown 事件结束时，您应该检查变量是否包含您的键盘快捷键所需的键。如果他们这样做了，请启动该操作。在实践中，您可能会有一长串可能的键盘快捷键。全部检查。也许您还需要额外的检查，例如某些快捷方式只能在某个控件被聚焦或某些东西处于正确状态时才处于活动状态。

作为一种变体，您可能不想在按键被按下时启动操作，而是在按键被释放时启动。在这种情况下，不要立即启动操作，而是在另一个变量中做一些注释，即按下了某某组合。然后等到所有键都被释放（集合为空），然后启动动作。如果在两者之间按下了其他一些键，请清除该注释并检查是否应该激活另一个组合。将其存储在 note-variable 中并继续等待。

【讨论】：

【解决方案2】：

不幸的是，控制键和功能键似乎是互斥的。您可以使用任意数量的键设置组合键，如下例所示，但组合控制和功能不起作用（无论如何在我的系统上）。

const result = document.querySelector('#result')
const keys = {}

window.addEventListener('keydown', (ev) => {
  keys[ev.key] = true
})

window.addEventListener('keyup', (ev) => {
  if (keys['1'] && keys['Control'] && keys['F1']) {
    console.log('This does not work on my system')
  } else if (keys['1'] && keys['F1']) {
    result.value = "F1 + 1 pressed!"
  } else if (keys['Control'] && keys['o'] && keys['p']) {
    result.value = "Control + o + p pressed!"
  } else {
    setTimeout(() => result.value = "", 500)
  }
  keys[ev.key] = false
})

<p>Click in the result pane and then press F1+1, or Control+o+p. Control+F1+1 does not work.</p>
<input id="result">

【讨论】：

andyvanee，当我尝试按 f1+1 时，就像您在示例中询问的那样，我的浏览器会打开帮助屏幕并且不允许我测试您的示例，即使 ctrl+o+p 也没有工作，但是，Kosh 在他之前的评论中给了我一个答案，到目前为止，我可以设置焦点，我只需要测试它是否仍然专注于我需要的事件，我仍在测试它是否有效。跨度>
这就是为什么我打开这个论坛，你使用的变量键，一次不能存储多个键，而keydown，keyup只提供处理预编译修饰符的方法，以解决我的问题keydown，keyup的问题必须扩展。感谢您的回复和所花费的时间，如果 kosh anwered，我能够解决我的问题，我将发布一个答案，试图解释我如何通过给出的答案解决问题。
是的，由于您的操作系统和浏览器首先捕获键并且您的应用程序最后出现，因此总是存在组合键冲突的问题。 tabindex 解决方案并没有真正回答所提出的问题，但如果它解决了您的问题，那就太好了:)

【解决方案3】：

感谢大家，编译给出的答案，我能够解决问题。我必须把焦点放在桌子上（由 kosh 提供，他给出了我需要的直接答案），并且在网页的帖子（事件）上，我能够捕捉到活动组件。我不能发布我构建的解决方案，因为代码属于公司，但我会尝试构建一个示例，并在周一发布，以防其他人在同样的疑问后到达这篇文章（巴西的复活节，明天我我正在回家，这就是为什么我只会在星期一展示这个例子）。再次感谢大家。

【讨论】：