JavaScript を使用して CAPS LOCK がオンまたはオフになっているかどうかを確認または検出する方法は?

Originally posted here!

Caps Lock キーがオンかオフかを確認または検出するには、入力タグ getModifierState() で KeyBoardEvent メソッドを使用し、文字列 CapsLock を渡して、JavaScript で CapsLock キーの現在の状態を取得します.

TL;DR

// get reference to the input tag
const myInput = document.getElementById("myInput");

// listen for a keydown event in the myInput
myInput.addEventListener("keydown", (event) => {
  // check if capslock is turned on or off
  // using the getModifierState() method
  const isCapsLockOn =
    event.getModifierState && event.getModifierState("CapsLock");

  console.log(isCapsLockOn); // true
});

理解を深めるために、まず HTML input を作成し、id を添付して JavaScript で参照します.

<!-- HTML input tag -->
<input type="text" id="myInput" />

次のように、グローバル myInput オブジェクトで getElementById() を使用して、JavaScript スクリプトで document 入力への参照を取得しましょう.

// get refernce to the input tag
const myInput = document.getElementById("myInput");

getModifierState() メソッドを使用するには、入力フィールドで KeyBoardEvent または keydown のような keyup をリッスンする必要があります.この例では、keydown キーボード イベントをリッスンしてみましょう.
myInput メソッドを使用して、addEventListener() にイベント リスナーをアタッチしましょう.このようにできるのですが、

// get refernce to the input tag
const myInput = document.getElementById("myInput");

// listen for a keydown event in the myInput
myInput.addEventListener("keydown", () => {
  // some cool stuff here!
});

KeyBoardEvent のリスナーをアタッチしたので、ユーザーが入力フィールドで何かを押すか入力すると、 KeyBoardEvent メソッドの関数に引数が渡されるので、ここでイベント オブジェクトで addEventListener() メソッドを使用して、文字列 getModifierState() を渡して、Caps Lock ボタンが現在オンになっているかオフになっているかを確認します.

CapsLock メソッドはブール値を返します.

このようにできるのですが、

// get refernce to the input tag
const myInput = document.getElementById("myInput");

// listen for a keydown event in the myInput
myInput.addEventListener("keydown", (event) => {
  // check if capslock is turned on or off
  const isCapsLockOn =
    event.getModifierState && event.getModifierState("CapsLock");

  console.log(isCapsLockOn); // true
});

これで、ユーザーが入力タグに書き込むときに、Caps Lock がオンになっているかオフになっているかを確認できます.

以上です😃!

上記のコードは JSBin にあります.

これが役に立ったと思ったら、気軽に共有してください 😃.