JavaScriptで入力フィールド内のCapsLockがオンかどうかを検出する方法
JavaScriptを使えば、入力フィールド内でユーザーがCapsLock（大文字固定）をオンにしているかどうかを簡単に検出できます。ポイントとなるのは、キーボードイベントオブジェクトが持つ getModifierState() メソッドです。このメソッドに「CapsLock」を指定すると、現在のCapsLockの状態を真偽値（true / false）で取得できます。
CapsLock検出のサンプルコード
以下は、入力フィールドでCapsLockがオンになったときに警告メッセージを表示する完全な実装例です。
<!DOCTYPE html>
<html>
<head>
<style>
#textBox {
display: none;
color: red;
}
</style>
</head>
<body>
<h1>Detecting Caps Lock Example</h1>
<input class="inputfield" value="Some textBox.." />
<h2>Press caps lock in the above input field to check warning</h2>
<h2 id="textBox">WARNING! Caps lock is ON.</h2>
<script>
var input = document.querySelector(".inputfield");
var textBox = document.querySelector("#textBox");
input.addEventListener("keyup", event => {
if (event.getModifierState("CapsLock")) {
textBox.style.display = "block";
} else {
textBox.style.display = "none";
}
});
</script>
</body>
</html>コードの解説
- 要素の取得：
document.querySelector()を使って、入力フィールドと警告表示用の要素をそれぞれ取得します。 - イベントの監視：
addEventListener("keyup", ...)により、ユーザーがキーを離したタイミングで処理を実行します。keydownでも同様に動作します。 - 状態の判定：
event.getModifierState("CapsLock")がtrueを返せばCapsLockはオン、falseならオフです。 - 表示の切り替え： 判定結果に応じて、警告メッセージの
displayスタイルをblock/noneに切り替えています。
実行結果
上記のコードをブラウザで実行すると、まず次のような画面が表示されます。
この状態でCapsLockをオンにして入力フィールドに何かを入力すると、以下のように赤色の警告メッセージ「WARNING! Caps lock is ON.」が表示されます。
応用のヒント
- keydownイベントの併用： CapsLockキー自体が押された瞬間も検出したい場合は、
keydownイベントにも同じリスナーを登録するとより確実です。 - パスワード入力への活用： ログインフォームやパスワード欄でこの仕組みを使うと、ユーザーの入力ミスを未然に防ぐことができ、UX向上につながります。
-
入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】
Webサイトのナビゲーションバー（グローバルナビ）に検索ボックスのような入力フィールドを組み込むと、ユーザーはどのページにいてもすぐに目的のコンテンツを探せるようになり、サイト全体の使いやすさが大きく向上します。 HTMLとCSSを少し書き加えるだけで、ナビゲーションメニューの内部に入力フィールドを配置できます。ポイントは、CSSのfloat: right;を使って入力フィールドをナビゲーションバーの右側に寄せることです。それでは、具体的な実装方法を見ていきましょう。 実装のポイント nav要素： 幅を100%にして背景色を設定し、overflow: auto;を指定することで、子要素のフ
-
CSSでフォーカス時に入力フィールドをクリアする方法
フォーカス時に入力フィールドをクリアするには入力フィールドにフォーカスが当たった瞬間に、既存の値を自動的にクリアしたいケースはよくあります。例えば、あらかじめデフォルトのテキストを表示しておき、ユーザーがフィールドをクリックした時点でその値を消去するといった使い方です。これを実現するには、HTMLのonfocus属性を使用し、フォーカスが当たったタイミングで入力値を空文字列に設定します。以下にコード例を示します。コード例<!DOCTYPE html> <html> <head> </head> <body> <h1>フォー