javascript - 检测并打印组合键 Javascript

Question

我目前正在尝试将用户提供的键盘组合转换成它们的可打印版本(例如，如果用户按下 shift + a 我希望能够检测到它并在某处打印字符串“shift + a”，以便用户知道他与操作相关联的组合。

到目前为止，我一直在使用提供的 bool 值:ctrlKey、altKey、shiftKey 和 metaKey，当它们为真时，我将它们的可打印版本添加到最终字符串。

它有效……在某种程度上……

我正确地收到了 ctrl 标志，但是 shift 标志不稳定(在不该换档的时候换档，在应该换档的时候不换档，尽管它对某些键可以正常工作)并且 alt 标志似乎只在少数情况下有效键和元标志似乎根本不起作用。 请注意，我的键盘工作正常，也就是说，这些键在正常情况下按预期工作(shift 键允许我大写，win 键允许我锁定我的电脑，等等......) 另请注意，我的键盘是 azerty。

它在 W3schools 示例中的行为方式相同:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_shiftkey

这是一个例子:

trying with &, which does not require shift on an azerty

trying with 1, which does require shift on an azerty

所以我假设我在检测组合键的方式上存在一些误解。感谢所有愿意提供帮助的人。

function logKey(e) {
    var modifier1;
    var modifier2;
    var modifier3;
    var modifier4;
    var display = "";

    if (e.ctrlKey) {
        modifier1 = "ctrl + ";
    }
    else {
        modifier1 = "";
    }
    if (e.altKey) {
        modifier2 = "alt + ";
    }
    else {
        modifier2 = "";
    }
    if (e.shiftKey) {
        modifier3 = "shift + ";
    }
    else {
        modifier3 = "";
    }      
    if (e.metaKey) {
        modifier4 = "meta + ";
    }
    else {
        modifier4 = "";
    }

    display = modifier1 + modifier2 + modifier3 + modifier4 + e.key

    window.alert(display);
}
window.addEventListener('keydown', logKey);

Answer 1

正如 skyline3000 在他们的评论中暗示的那样，您最好独立跟踪按下了哪些键，然后在需要时查看您跟踪的内容。

像这样:

const input = document.querySelector('input');
const keysDown = [];

input.addEventListener('keydown', e => {
  if (keysDown.indexOf(e.keyCode) === -1) {
    keysDown.push(e.keyCode);
  }
  
  console.log(keysDown);
});

input.addEventListener('keyup', e => {
  const index = keysDown.indexOf(e.keyCode);
  
  if (index !== -1) {
    keysDown.splice(index, 1);
  }
  
  console.log(keysDown, e);
});

Focus on input to register keys:
<input />

这将使您可以更精确地跟踪它们，甚至可以一次跟踪大量按键。

然后，当您想要显示他们按下了哪些键时，您只需打印出您的 keysDown 列表即可。