有的时候尤其是在进行密码输入时，我们需要检查键盘上的 Caps Lock 键是否被打开，并通知用户。这时可以通过用 KeyboardEvent.getModifierState() 方法 CapsLock 的值来执行此操作。
换句话说，我们必须侦听元素上的键盘事件才能检查 Caps Lock 键的状态：
HTML：
- <form>
- <label for="username">Username:</label>
- <input id="username" name="username">
- <label for="password">Password:</label>
- <input id="password" name="password" type="password">
- <span id="password-message" style="display: none">Caps Lock is on</span>
- </form>
JavaScript：
- const el = document.getElementById('password');
- const msg = document.getElementById('password-message');
- el.addEventListener('keyup', e => {
- msg.style = e.getModifierState('CapsLock')
- ? 'display: block'
- : 'display: none';
- });
通过上面的例子可以看到，在选择的元素上使用了 'keyup' 事件，然后调用 KeyboardEvent.getModifierState() 并检查 'CapsLock' 键的状态。'keydown'和 'keypress' 也能起到类似的作用。但是在多台设备上进行测试后，似乎应该首选 keyup 方法，因为它在不同的操作系统和浏览器上的效果更好。
