使用 getModifierState('CapsLock') 结合 keyup 事件可稳定检测 Caps Lock 开关状态，避免 keydown 导致的重复触发与状态错位问题。
使用 `getmodifierstate('capslock')` 结合 `keyup` 事件可稳定检测 caps lock 开关状态，避免 `keydown` 导致的重复触发与状态错位问题。
在 Web 表单开发中，为提升密码等敏感输入的用户体验，常需实时提示用户 Caps Lock 是否处于开启状态（例如显示“CAPS LOCK ON”警告）。虽然 KeyboardEvent.getModifierState('CapsLock') 是标准且跨浏览器支持良好的 API（Chrome 51+、Firefox 48+、Edge 79+、Safari 14.1+），但若错误绑定到 keydown 事件，极易引发状态闪烁、日志重复、提示相反等典型问题——这并非浏览器 Bug 或系统异常，而是事件机制本身导致的。
根本原因在于：keydown 会在按键按下并持续时反复触发（尤其 Caps Lock 键本身无字符输出，但系统会按操作系统级重复率多次派发事件），而 getModifierState() 返回的是事件触发瞬间的修饰键状态。当用户按下 Caps Lock 键时，系统先切换状态，再触发事件；若 keydown 多次触发，就可能捕获到“切换前”和“切换后”的交替状态，造成视觉抖动与逻辑混乱。
✅ 正确做法是监听 keyup 事件：
-
keyup仅在按键完全释放后触发一次，此时 Caps Lock 的最终状态已稳定生效； - 无重复触发风险，状态判断精准可靠；
- 兼容所有现代主流浏览器，无需 polyfill。
以下为完整、可直接运行的实现示例：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Caps Lock 检测示例</title>
<style>
#message { color: #d32f2f; font-weight: bold; margin: 8px 0; }
#log { font-family: monospace; font-size: 0.85em; max-height: 120px; overflow-y: auto; background: #f5f5f5; padding: 6px; }
</style>
</head>
<body>
<label for="password">请输入密码：</label>
<input type="password" id="password" onkeyup="handleCapsLock(event)" autocomplete="off">
<div id="message" role="alert"></div>
<div id="log"></div>
<script>
function handleCapsLock(event) {
const isCapsOn = event.getModifierState('CapsLock');
const messageEl = document.getElementById('message');
const logEl = document.getElementById('log');
messageEl.textContent = isCapsOn ? '⚠️ CAPS LOCK 已开启' : '';
// 可选：记录调试日志（生产环境建议移除）
logEl.textContent = `${new Date().toLocaleTimeString()} — CapsLock: ${isCapsOn}\n` + logEl.textContent;
}
// 增强健壮性：页面加载后立即检查初始状态（如用户进入页面前已开启 Caps Lock）
window.addEventListener('DOMContentLoaded', () => {
// 模拟一次空事件以触发初始检测（需注意：无法在无焦点时可靠获取状态）
// 更推荐方案：在 input 获得焦点时主动检测一次
const input = document.getElementById('password');
input.addEventListener('focus', () => {
// focus 时不触发键盘事件，改用 document.activeElement + 键盘事件监听组合
// 实际项目中，可在首次 focus 后监听一次 keyup，或结合 placeholder 提示
});
});
</script>
</body>
</html>? 关键注意事项：
- ✅ 务必使用
onkeyup（或addEventListener('keyup', ...)），禁用onkeydown绑定； - ✅ 对密码字段建议添加
autocomplete="off"防止浏览器自动填充干扰焦点与事件流； - ⚠️
getModifierState()在部分旧版 Safari（keypress + 字符大小写比对（仅适用于文本输入，且有局限性）； - ? 用户体验优化：可将提示信息加入
role="alert"，确保屏幕阅读器可访问；配合 CSS 实现平滑显隐过渡； - ? 安全提示：Caps Lock 检测纯属前端体验增强，绝不影响服务端密码校验逻辑，开发者仍须严格按大小写敏感规则处理认证。
综上，通过将检测逻辑迁移至 keyup 事件，即可一劳永逸解决状态抖动问题，实现稳定、语义清晰、无障碍友好的 Caps Lock 提示功能。
