如何不使用事件监听器检测页面加载时CapsLock初始开启状态？

• 核心结论：无用户交互的前提下，页面加载瞬间直接检测CapsLock开启状态是不可能实现的，这是所有主流浏览器统一遵循的安全限制，没有可绕过的方案。
• 关于getModifierState的调用限制：这个API从设计上就只挂载在Event实例上，作用是返回当前事件触发瞬间的修饰键状态，不存在脱离事件对象、可全局直接调用的版本，任何不传入事件对象直接调用该方法的写法都会抛出错误。
• 为什么现有方案都依赖用户交互：所有能准确拿到CapsLock状态的事件（包括键盘事件、点击事件、焦点事件、鼠标移动事件），都必须是用户真实触发的原生交互事件，脚本自行模拟派发的事件无法拿到真实的修饰键状态，部分浏览器会直接返回固定的false值。

可落地的最优实现方案 #

不需要等用户敲击键盘，只要用户和页面产生任意一次交互就能立刻拿到CapsLock状态，对体验几乎无感知：

• 页面加载完成后，给document绑定三个一次性的事件监听器，分别监听click、focus（捕获阶段绑定，保证输入框聚焦也能触发）、mousemove事件
• 任意一个监听器触发时，立刻通过事件对象调用getModifierState('CapsLock')拿到当前状态，执行你需要的初始化逻辑
• 拿到状态后立刻移除这三个一次性监听器，避免重复触发，之后再给输入框绑定常规的键盘事件监听，实时检测输入过程中的CapsLock状态变化即可

参考实现代码：

// 首次交互时检测CapsLock状态
function detectCapsOnFirstInteract(e) {
  const isCapsLockEnabled = e.getModifierState('CapsLock');
  // 此处写入你的初始化逻辑，比如给密码框加CapsLock开启提示
  console.log('首次检测到CapsLock状态：', isCapsLockEnabled);

  // 拿到结果后移除所有一次性监听，避免重复执行
  document.removeEventListener('click', detectCapsOnFirstInteract);
  document.removeEventListener('focus', detectCapsOnFirstInteract, true);
  document.removeEventListener('mousemove', detectCapsOnFirstInteract);

  // 后续绑定输入过程的实时检测逻辑
  document.querySelectorAll('input[type="password"]').forEach(input => {
    input.addEventListener('keyup', (ev) => {
      const currentCapsState = ev.getModifierState('CapsLock');
      // 实时更新提示状态即可
    });
  });
}

// 页面加载完成后立刻挂载一次性监听
window.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('click', detectCapsOnFirstInteract);
  document.addEventListener('focus', detectCapsOnFirstInteract, true);
  document.addEventListener('mousemove', detectCapsOnFirstInteract);
});

注意：不要使用「检测输入字符大小写」的老式方案，该方案在中文输入法开启、用户输入非字母字符时准确率极低，远不如getModifierState方案可靠。

内容的提问来源于stack exchange，提问作者Jacob Hornbeck