模拟触发KeyboardEvent时getModifierState()无法获取CapsLock状态

问题原因 #

手动构造的KeyboardEvent不会自动同步系统当前的CapsLock状态，若未显式指定修饰键状态，getModifierState("CapsLock")会返回默认的false，这和真实按键触发时自动关联系统状态的行为不同。

解决方案 #

方案1：直接获取CapsLock状态（推荐） #

不需要模拟按键事件，使用navigator.keyboard.getModifierState()API可以直接获取当前系统的CapsLock状态，高效且准确：

window.addEventListener('load', () => {
  const capsLockIsOn = navigator.keyboard.getModifierState('CapsLock');
  // 直接调用你的处理逻辑
  capslockCheck({ 
    getModifierState: (key) => key === 'CapsLock' ? capsLockIsOn : false 
  });
});

方案2：构造模拟事件时传入真实状态 #

如果一定要通过模拟keydown事件触发逻辑，需要先获取真实状态，再传入事件构造器：

window.addEventListener('load', () => {
  // 获取真实的CapsLock状态
  const capsLockState = navigator.keyboard.getModifierState('CapsLock');
  // 构造事件时指定modifierState
  const event = new KeyboardEvent("keydown", {
    key: "Tab",
    modifierState: { CapsLock: capsLockState }
  });
  document.dispatchEvent(event);
});

兼容旧浏览器的方案 #

如果需要兼容不支持navigator.keyboard的旧浏览器，可以通过监听真实按键事件缓存状态，页面加载时使用缓存值：

let capsLockState = false;

// 监听真实按键事件，实时更新状态
document.addEventListener('keydown', (e) => {
  capsLockState = e.getModifierState('CapsLock');
  capslockCheck(e);
});

document.addEventListener('keyup', (e) => {
  capsLockState = e.getModifierState('CapsLock');
});

// 页面加载时使用缓存状态
window.addEventListener('load', () => {
  const event = new KeyboardEvent("keydown", {
    key: "Tab",
    getModifierState: (key) => key === 'CapsLock' ? capsLockState : false
  });
  document.dispatchEvent(event);
});

内容的提问来源于stack exchange，提问作者Firu 115