Caps Lockがオンになっているか検出する

Caps Lockがオンになっているかを確認するには、KeyboardEventオブジェクトのgetModifierState()メソッドを使用します。

const capslockIsOn = event.getModifierState(modifier);Code language: JavaScript (javascript)

getModifierState()メソッドは、modifierがアクティブな場合はtrueを返し、そうでない場合はfalseを返します。

event.getModifierState('CapsLock')を使用すると、Caps Lockがオンになっているかを検出できます。

次のようなパスワードフィールドがあると仮定します。

  <input type="password" name="password" id="password" placeholder="Enter a password">
    <div class="message"></div>Code language: HTML, XML (xml)

以下は、Caps Lockをオンにしてパスワードを入力した場合に警告メッセージを表示します。

 const password = document.querySelector('#password');
 const message = document.querySelector('.message');

 password.addEventListener('keyup', function (e) {
     if (e.getModifierState('CapsLock')) {
         message.textContent = 'Caps lock is on';
     } else {
         message.textContent = '';
     }
 });Code language: JavaScript (javascript)

デモ