（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

有的时候尤其是在进行密码输入时，我们需要检查键盘上的 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 方法，因为它在不同的操作系统和浏览器上的效果更好。

本文转载自网络，原文链接：http://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247499696&idx=2&sn=9f22ab34731d2156fbd559715255e50f&chksm=eb6bdaebdc1c53fdd4be07257c91ab826be5e5dc02dae3a79c533e3130e9324c50bc6460cf62&mpshare=1&s