有的時候尤其是在進(jìn)行密碼輸入時，我們需要檢查鍵盤上的 Caps Lock 鍵是否被打開，并通知用戶。這時可以通過用 KeyboardEvent.getModifierState() 方法 CapsLock 的值來執(zhí)行此操作。

[[388497]]

換句話說，我們必須偵聽元素上的鍵盤事件才能檢查 Caps Lock 鍵的狀態(tài)：

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' 事件，然后調(diào)用 KeyboardEvent.getModifierState() 并檢查 'CapsLock' 鍵的狀態(tài)。'keydown'和 'keypress' 也能起到類似的作用。但是在多臺設(shè)備上進(jìn)行測試后，似乎應(yīng)該首選 keyup 方法，因為它在不同的操作系統(tǒng)和瀏覽器上的效果更好。