用javascript检测大写锁定键的状态

有时候尤其是在进行密码输入的时候，需要检查键盘上的Caps Lock键是否被打开，并通知用户。这时可以通过KeyboardEvent.getModifierState()方法CapsLock的值来执行此操作。换句话说必须侦听元素上的键盘事件才能检查Caps Lock键的状态。

HTML

<form>
    <label for="username">Username:</label>
    <input id="usernmae" name="username"/>

    <label for="password">Password:</label>
    <input id="password" name="password" type="password"/>
    <span 0d="password-message" style="display:none">Caps Lock is on</span>
</form>

JavaScript

const el = document.getElementById('password');
const msg  = document = document.getElementById('password-message');

e.addEEventListemer('keyup', e => {
    msg.style = e.getModifierState('CapsLock') ? 'display:block' : 'display: none'
})

在选择元素时使用了keyup事件，然后调用KeyboardEvent.getModifierState()并检查CapsLock键的状态，keydown和keypress也能起到类似的作用，但是在多台设备商进行测试后，应首选keyup方法，因为它在不同的操作系统和浏览器上的效果更好。