HTML DOM KeyboardEventのlocationプロパティとは？押されたキーの位置を取得する方法
HTML DOMのKeyboardEventオブジェクトが持つlocationプロパティは、キーボード上で押されたキーの位置（場所）に対応する数値を返します。このプロパティを使うことで、同じ文字でもキーボードのどのエリアで入力されたのかを判別できます。
構文
押されたキーの位置を取得するには、以下のように記述します。
event.location
戻り値となる数値の一覧
locationプロパティが返す数値は以下の4種類です。
| 数値 | 説明 |
|---|---|
| 0 | キーボードの中央セクションにあるほぼすべてのキーを表します。（例：「Q」「\」、スペースキーなど） |
| 1 | キーボード左側セクションのキーを表します。（例：左Ctrl、左Shift、左Altなど） |
| 2 | キーボード右側セクションのキーを表します。（例：右Ctrl、右Shift、右Altなど） |
| 3 | テンキー（数字パッド）セクションのキーを表します。（例：「1」「/」「.」など） |
サンプルコード
ここでは、KeyboardEventのlocationプロパティを使った具体的な例を見てみましょう。テキストフィールドでキーが押されると、そのキーがキーボードのどのセクションに属しているかを画面に表示します。
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent location</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-location</legend>
<label>空欄に入力してください：
<input type="text" id="textSelect" placeholder="ここに入力..." onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventData(InputEvent) {
if(InputEvent.location === 0)
divDisplay.textContent = '中央セクションのキーが押されました';
else if(InputEvent.location === 1)
divDisplay.textContent = '左側セクションのキーが押されました';
else if(InputEvent.location === 2)
divDisplay.textContent = '右側セクションのキーが押されました';
else
divDisplay.textContent = 'テンキーセクションのキーが押されました';
}
</script>
</body>
</html>実行結果
このコードを実行すると、以下のような結果になります。
テキストフィールドに何も入力していない状態：
テキストフィールドに「w」と入力した後：
テンキー側の「+」キーを押した後：
このように、locationプロパティを活用すれば、キーイベント発生時にどのエリアのキーが操作されたかを簡単に判定でき、ゲームやショートカット機能など、より高度なキーボード操作の実装に役立ちます。
-
HTML DOMのLocation searchプロパティとは？URLクエリ文字列の取得・設定方法を解説
JavaScriptのLocationオブジェクトにおけるsearchプロパティは、URLに含まれるクエリ文字列（「?」以降の部分）を取得または設定するためのプロパティです。例えば、「https://example.com/page?name=taro&id=123」というURLの場合、searchプロパティは「?name=taro&id=123」という文字列を返します。 構文 searchプロパティの基本的な構文は以下のとおりです。 値の取得 location.search 値の設定 location.search = searchString 使用例 ここでは、実際にsearchプ
-
HTML DOM KeyboardEventのaltKeyプロパティとは？ALTキー押下状態の判定方法を解説
HTML DOMのKeyboardEvent altKeyプロパティは、HTMLドキュメント上でキーイベントが発生したときに、Alt（ALT）キーが押されていたかどうかを判定するためのプロパティです。このプロパティは読み取り専用で、戻り値として以下のブール値（真偽値）を返します。true：キーイベント発生時にAltキーが押されていた場合false：Altキーが押されていなかった場合なお、Mac環境ではOptionキーがAltキーに相当します。また、類似の修飾キー判定プロパティとして、Ctrlキーを判定する「ctrlKey」、Shiftキーを判定する「shiftKey」、Metaキー（Windo