HTML DOM KeyboardEventオブジェクトとは？プロパティ・イベントの使い方を解説
HTML DOMのKeyboardEventオブジェクトは、ユーザーがキーボードのキーを押したり離したりした際に発生するイベントを表すオブジェクトです。このオブジェクトを利用することで、押されたキーの種類や修飾キー（Alt・Ctrl・Shiftなど）の状態を取得でき、キーボード操作に応じたインタラクティブなWebページを作成できます。
KeyboardEventの主なプロパティとメソッド
KeyboardEventオブジェクトには、以下のようなプロパティおよびメソッドが用意されています。
| プロパティ／メソッド | 説明 |
|---|---|
| altKey | 「ALT」キーが押されているかどうかを返します |
| charCode | キーのUnicode文字コードを返します |
| code | 押されたキーの物理的なコードを返します |
| ctrlKey | 「CTRL」キーが押されているかどうかを返します |
| getModifierState() | 指定した修飾キーがアクティブであればtrue、非アクティブであればfalseを返します |
| isComposing | イベントがIMEによる変換中（composing）の状態かどうかを返します |
| key | イベントが表すキーの値（キーの名前）を返します |
| keyCode | イベントを発生させたキーのUnicode文字コードを返します（非推奨） |
| location | キーボードやデバイス上でのキーの位置を返します |
| metaKey | キーイベント発生時に「meta」キー（MacのCommandキーなど）が押されていたかどうかを返します |
| repeat | キーが押し続けられて繰り返し発生しているかどうかを返します |
| shiftKey | キーイベント発生時に「SHIFT」キーが押されていたかどうかを返します |
| which | イベントを発生させたキーのUnicode文字コードを返します（非推奨） |
なお、keyCodeとwhichは現在では非推奨とされており、代わりにkeyプロパティやcodeプロパティを使用することが推奨されています。
KeyboardEventに関連するイベント
KeyboardEventオブジェクトに対して動作する主なイベントは以下の通りです。
| イベント | 説明 |
|---|---|
| onkeydown | ユーザーがキーを押しているときに発生します |
| onkeypress | ユーザーがキーを押したときに発生します（文字キーのみ対象） |
| onkeyup | ユーザーがキーを離したときに発生します |
サンプルコード：keyプロパティの使用例
それでは、keyプロパティを使った具体的な例を見てみましょう。次のコードでは、テキストフィールドに入力されたキーが「B」かどうかを判定しています。
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent key</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-key</legend>
<label>空欄を埋めてください：
<input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="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.key === 'B')
divDisplay.textContent = '正解です！';
else if(InputEvent.key === 'b')
divDisplay.textContent = '惜しい！Caps Lockがオフになっているかもしれません';
else
divDisplay.textContent = 'もう一度挑戦してください：'+textSelect.placeholder;
textSelect.textContent = '';
}
</script>
</body>
</html>実行結果
このコードを実行すると、以下のような動作になります。
テキストフィールドに何も入力していない状態：
「b」を入力した場合：
「B」を入力した場合：
このように、keyプロパティを参照することで、大文字と小文字を区別したキー入力の判定が可能になります。キーボード操作に連動したフォームバリデーションやショートカット機能など、さまざまな場面で活用できるので、ぜひ実際に試してみてください。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注