JavaScriptでCapsLock入力を検知して処理を変える

2024-04-08

JavaScriptでCapsLockがオンかどうかを確認する方法

event.getModifierState() メソッドは、キーボードイベントオブジェクトを受け取り、押されている修飾キーの状態を取得します。CapsLockは修飾キーの一つなので、このメソッドを使ってCapsLockがオンかどうかを確認できます。

function isCapsLockOn(event) {
  return event.getModifierState("CapsLock");
}

// イベントリスナーを追加
document.addEventListener("keydown", (event) => {
  if (isCapsLockOn(event)) {
    // CapsLockがオンの場合の処理
  } else {
    // CapsLockがオフの場合の処理
  }
});

KeyboardEvent.capsLock プロパティを使う

KeyboardEvent オブジェクトには、capsLock プロパティがあり、CapsLockがオンかどうかを示す真偽値が格納されています。

document.addEventListener("keydown", (event) => {
  if (event instanceof KeyboardEvent) {
    if (event.capsLock) {
      // CapsLockがオンの場合の処理
    } else {
      // CapsLockがオフの場合の処理
    }
  }
});

document.querySelector() メソッドを使って、CSSセレクターでcapslock属性を持つ要素を取得できます。この要素は、CapsLockの状態に応じてスタイルが変更されます。

const capsLockIndicator = document.querySelector(".capslock-indicator");

document.addEventListener("keydown", () => {
  if (capsLockIndicator.classList.contains("active")) {
    // CapsLockがオンの場合の処理
  } else {
    // CapsLockがオフの場合の処理
  }
});

上記の方法のいずれかを使って、JavaScriptでCapsLockがオンかどうかを確認できます。どの方法を使うかは、状況によって異なります。

補足

上記のコードは、基本的な例です。実際の使用例では、必要に応じてコードを変更する必要があります。
ブラウザによっては、上記の方法がうまく動作しない場合があります。

JavaScriptでCapsLockがオンかどうかを確認するサンプルコード

HTML

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CapsLock確認</title>
</head>
<body>
  <p>CapsLockがオンかどうかを確認するサンプルコード</p>
  <p>CapsLockがオンの場合、このテキストは赤色になります。</p>
  <p id="capslock-indicator"></p>
  <script src="script.js"></script>
</body>
</html>

JavaScript

const capsLockIndicator = document.getElementById("capslock-indicator");

document.addEventListener("keydown", (event) => {
  if (event instanceof KeyboardEvent) {
    if (event.capsLock) {
      capsLockIndicator.classList.add("active");
    } else {
      capsLockIndicator.classList.remove("active");
    }
  }
});

CSS

.capslock-indicator {
  color: black;
  font-size: 16px;
}

.capslock-indicator.active {
  color: red;
}

このコードを実行すると、ブラウザに以下の内容が表示されます。

CapsLockがオンかどうかを確認するサンプルコード

CapsLockがオンの場合、このテキストは赤色になります。

CapsLockキーを押すと、テキストが赤色に変わります。

JavaScriptでCapsLockがオンかどうかを確認する他の方法

onkeydown イベントは、キーボードのキーが押されたときに発生します。このイベントハンドラ内で、event.keyCode プロパティを使って押されたキーのコードを取得できます。CapsLockキーのコードは 20 なので、以下のコードのように event.keyCode が 20 かどうかをチェックすることで、CapsLockがオンかどうかを確認できます。

document.addEventListener("keydown", (event) => {
  if (event.keyCode === 20) {
    // CapsLockがオンの場合の処理
  } else {
    // CapsLockがオフの場合の処理
  }
});

document.addEventListener("keyup", (event) => {
  if (event.keyCode === 20) {
    // CapsLockがオフの場合の処理
  } else {
    // CapsLockがオンの場合の処理
  }
});

document.addEventListener("keypress", (event) => {
  if (event.keyCode === 20) {
    // CapsLockがオンの場合の処理
  } else {
    // CapsLockがオフの場合の処理
  }
});

document.activeElement プロパティは、現在フォーカスされている要素を取得します。この要素がテキスト入力フィールドの場合、selectionStart プロパティと selectionEnd プロパティを使って、カーソル位置を取得できます。CapsLockがオンの場合、カーソル位置は常に変化しないので、以下のコードのように selectionStart と selectionEnd を比較することで、CapsLockがオンかどうかを確認できます。

const activeElement = document.activeElement;

if (activeElement && activeElement.tagName === "INPUT") {
  if (activeElement.selectionStart === activeElement.selectionEnd) {
    // CapsLockがオンの場合の処理
  } else {
    // CapsLockがオフの場合の処理
  }
}