四时宝库

小编在打字时很多时候没注意到大写锁定已经打开，等打字的时候才会发现。但是在输入密码的时候却是不容易发现的，那么如何让用户知道自己的大写锁定已经开启了呢？

为了检测用户是否打开了键盘的大写锁定，我们将采用KeyboardEvent的getModifierState方法：

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        //警告用户他们的大写锁定是开启的
    }
});

KeyboardEvent是什么？

KeyboardEvent 对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown， keypress 与 keyup 用于识别不同的键盘活动类型。——KeyboardEvent - Web API | MDNMDN Web DocsMDN logoMozilla logo

注意：

KeyboardEvent 只在低级别提示用户与一个键盘按键的交互是什么，不涉及这个交互的上下文含义。当你需要处理文本输入的时候，使用 input 事件代替。用户使用其他方式输入文本时，如使用平板电脑的手写系统或绘图板，键盘事件可能不会触发。

getModifierState是什么？

我的理解是getModifierState在以按键为中心的事件期间提供有关用户键盘的信息

这是w3c官网有关信息https://w3c.github.io/uievents/#dom-eventmodifierinit-metakey