大写锁定の検出方法

JavaScriptで入力フィールド内に大写锁定が開かれているかどうかを検出する方法を学びます。

大写锁定のオンオフを検出

入力フィールド内に "Caps Lock" を押してみてください:

WARNING! Caps lock is ON.

インスタンス

// 入力フィールドを取得
var input = document.getElementById("myInput");
// 警告テキストを取得
var text = document.getElementById("text");
// ユーザーがキーボードでどのキーも押したときに、この関数を実行します
input.addEventListener("keyup", function(event) {
  // "Caps Lock" が押されている場合、警告テキストを表示
  if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
);

自分で試してみてください

関連ページ

リファレンスマニュアル:MouseEvent getModifierState() メソッド