"e.getModifierState不是函数"错误

Question

我试图通过临时创建一个隐藏的输入字段，在该输入上触发keyup事件，然后检查e.getModifierState('CapsLock')的布尔值来检测客户端是否启用了CapsLock。

我编写的函数如下，它当前在包含e.getModifierState的行上抛出错误Uncaught TypeError: e.getModifierState is not a function，我正在努力诊断为什么会发生这种情况。我愿意接受任何帮助！

let checkCaps = () => {
let tempInput = document.createElement('input');
let keyupEvent = new Event('keyup');
tempInput.type = 'hidden';
tempInput.id = 'check-caps';
let capsOn = false;
tempInput.addEventListener('keyup', e => {
e.which = 65;
capsOn = e.getModifierState('CapsLock');
})
tempInput.dispatchEvent(keyupEvent);
tempInput.remove();
return capsOn;
}
checkCaps(); // testing the function

Answer 1

类Event是所有特定事件类的基类。如果要生成键盘事件，则必须使用KeyboardEvent类，如下所示：

let checkCaps = () => {
let tempInput = document.createElement('input');
let keyupEvent = new KeyboardEvent('keyup');
tempInput.type = 'hidden';
tempInput.id = 'check-caps';
let capsOn = false;
tempInput.addEventListener('keyup', e => {
e.which = 65;
capsOn = e.getModifierState('CapsLock');
})
tempInput.dispatchEvent(keyupEvent);
tempInput.remove();
return capsOn;
}
checkCaps(); // testing the function

如果测试了这个，代码就会运行，但我总是得到getModifierState('CapsLock')的false

似乎您必须指定当前值自行生成KeyboardEvents。但这不是你想要的。似乎其他人也有同样的问题，如果没有真正的用户输入，就没有解决方案。

请参阅：如何使用JavaScript在页面加载时(即，不在按键时(检测Caps Lock状态？