用 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

相关推荐
sjmaysee14 分钟前
Java框架SpringBoot(一)
java·开发语言·spring boot
寒秋花开曾相惜17 分钟前
(学习笔记)3.8 指针运算(3.8.3 嵌套的数组& 3.8.4 定长数组)
java·开发语言·笔记·学习·算法
想唱rap24 分钟前
Linux线程
java·linux·运维·服务器·开发语言·mysql
kgduu31 分钟前
js之客户端存储
javascript·数据库·oracle
Tony Bai43 分钟前
Rust 看了流泪,AI 看了沉默:扒开 Go 泛型最让你抓狂的“残疾”类型推断
开发语言·人工智能·后端·golang·rust
四千岁44 分钟前
2026 最新版:WSL + Ubuntu 全栈开发环境,一篇搞定!
javascript·node.js
njidf1 小时前
C++与Qt图形开发
开发语言·c++·算法
qwehjk20081 小时前
代码动态生成技术
开发语言·c++·算法
竹林8181 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑实录
前端·javascript
是翔仔呐1 小时前
第11章 显示外设驱动:I2C协议OLED屏、SPI协议LCD屏字符/图片/中文显示
c语言·开发语言·stm32·单片机·嵌入式硬件·学习·gitee