用 JavaScript 检测键盘大写锁定键的状态 - JS 判断大写锁定

用户在输入密码的时候,由于看不到输入的字母,这时如果 Caps Lock 大写锁定键打开,会给用户造成不必要的困扰。让我们看看如何使用JavaScript检测大写锁定。

KeyboardEvent 上有一个名为 getmodifierState 的方法,我们可以使用它来执行此操作。这可以在键盘相关事件的事件侦听器内部访问:

js 复制代码
document.querySelector('input[type=password]')
  .addEventListener('keyup', (keyboardEvent) => {
    const isCapsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (isCapsLockOn) {
        // code for notifying the user goes here
    }
});

这段代码告诉我们如何使用 JavaScript 检测大写锁定键。如果我们愿意的话,我们还可以使用 keydown 方法而不是 keyup。但 keyup 有更好的浏览器支持,所以我们更喜欢使用它。如果您有任何问题,请在评论中告诉我们。

参考文档:How to detect caps lock with JavaScript

相关推荐
djarmy5 小时前
MAIN.c(1): warning C318: can’t open file ‘STC8G.H’ 报错 解决 分析
c语言·开发语言·mongodb
HEJOO95 小时前
深入理解 Java volatile 关键字:原理、用法与常见误区
java·开发语言·spring
曹牧5 小时前
Java:no content to map due to end of input
java·开发语言
梦梦代码精5 小时前
《回收租赁系统技术选型避坑指南:业务闭环与二开自由度详解》
开发语言·低代码·docker·开源·代码规范
隔窗听雨眠6 小时前
记一次SQL Server数据库性能分析:从CPU100%到单配置修复的完整诊断
开发语言·数据库·php
David猪大卫6 小时前
【C++修炼】智能指针使用及原理
开发语言·c++·经验分享·笔记·学习·考研·面试
charlie1145141916 小时前
现代Qt开发之图像处理进阶:像素操作与格式转换
开发语言·图像处理·qt
李永奉6 小时前
中科蓝讯SDK开发-BT893x 面条耳机连接vivo手机后连接APP端,最后手机端设置页面手动断开蓝牙连接,此时耳机端假断开
c语言·开发语言·嵌入式硬件·物联网·智能手机·电脑
lemon_sjdk6 小时前
DOM 节点
java·前端·javascript
leoZ2317 小时前
2026-09-09-springboot-cloud-deploy-pitfalls
java·前端·javascript·vue.js·人工智能·spring boot·后端