HTML DOM KeyboardEventのgetModifierState()メソッドの使い方を解説
getModifierState()メソッドは、指定した修飾キー（モディファイアキー）が現在押されているかどうかを判定し、押されていればtrue、押されていなければfalseを返します。CapsLockのように画面からは把握しにくいキーの状態をJavaScriptから手軽に確認できるため、パスワード入力中にCapsLockのオンを警告するなど、ユーザビリティ向上を目的とした場面でよく活用されています。
構文
getModifierState()メソッドの基本構文は次のとおりです。引数には、状態を調べたい修飾キーの名前を文字列で指定します。
event.getModifierState("modifierKey")指定できる修飾キーの一覧
引数の"modifierKey"には、以下の修飾キー名を指定できます。
| modifierKey | 対応するキー |
|---|---|
| Alt | Altキー（MacではOptionキー） |
| AltGraph | AltGrキー |
| CapsLock | CapsLockキー |
| Control | Ctrlキー |
| Meta | Windowsキー／Commandキー |
| NumLock | NumLockキー |
| ScrollLock | ScrollLockキー |
| Shift | Shiftキー |
サンプルコード
それでは、getModifierState()メソッドを使った具体的な例を見てみましょう。次のサンプルでは、パスワード入力中にCapsLockキーがオンになっているかどうかをリアルタイムで判定し、その結果を画面に表示します。
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent getModifierState()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent getModifierState( )</legend>
<label>パスワード:
<input type="password" id="textSelect" onkeydown="getEventState(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
window.addEventListener('keydown', function(event) {
console.log('CapsLock', event.getModifierState("CapsLock"));
});
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
divDisplay.textContent = '入力中にCapsLockキーを押してみてください';
function getEventState(InputEvent) {
if(InputEvent.getModifierState("CapsLock"))
divDisplay.textContent = 'CapsLockがオンになっています。ご注意ください！';
else
divDisplay.textContent = 'CapsLockはオフになっています。';
}
</script>
</body>
</html>
実行結果
このコードをブラウザで実行すると、次のような表示になります。
CapsLockキーを「ON」にする前 −
CapsLockキーを「ON」にした後 −
CapsLockキーを「OFF」に戻した後 −
まとめ
getModifierState()メソッドを使えば、ShiftやCtrlといった修飾キーはもちろん、CapsLockやNumLockなどロック系キーの状態も簡単に取得できます。Chrome・Firefox・Safari・Edgeなど主要なブラウザでサポートされており、keydownイベントだけでなくkeyupイベントでも同様に利用できるため、フォーム入力の補助機能などを実装する際にぜひ活用してみてください。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや