HTML DOM KeyboardEventのcodeプロパティとは？使い方を解説
KeyboardEventのcodeプロパティとは
JavaScriptのKeyboardEventオブジェクトが持つcodeプロパティは、キーボードイベント発生時に押されたキーに対応するキー識別子（キーコード）を返します。例えば、「A」キーであれば"KeyA"、Enterキーであれば"Enter"といった値が取得できます。
注意： ユーザーが入力した文字を正確に判定したい場合は、codeプロパティではなくkeyプロパティを使用することが推奨されています。
codeプロパティとkeyプロパティの違い
codeプロパティはキーボード上の物理的なキーの位置を示すため、JIS配列やUS配列などのキーボードレイアウトの影響を受けません。一方、keyプロパティは実際に入力された文字そのものを返します。そのため、入力文字の正確な判定が必要な場面ではkeyプロパティを使うのが望ましいでしょう。
構文
以下が基本の構文です。
直近で入力された文字のコードを取得する場合：
event.code
サンプルコード
それでは、KeyboardEventのcodeプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent code</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-code</legend>
<label>Press a key:
<input type="text" id="textSelect" onkeypress="getEventData(event)" autofocus>
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getEventData(InputEvent) {
divDisplay.textContent = 'Pressed key: '+InputEvent.code;
}
</script>
</body>
</html>このサンプルでは、テキスト入力欄でキーを押すたびにonkeypressイベントが発生し、押されたキーのcode値が画面に表示される仕組みです。
実行結果
上記のコードを実行すると、次のように動作します。
テキストフィールドに何も入力していない状態：
テキストフィールドに「\（バックスラッシュ）」を入力した後：
テキストフィールドに「H」を入力した後：
まとめ
KeyboardEventのcodeプロパティを使うことで、押されたキーの物理的な識別子を簡単に取得できます。ただし、キーボードレイアウトに依存しない正確な文字判定が必要なケースでは、keyプロパティの利用を検討しましょう。
-
HTML DOMのli valueプロパティとは？使い方とサンプルコードを解説
HTML DOM の value プロパティは、<li> 要素の value 属性の値を取得または設定するために使用されます。順序付きリスト（<ol>）では通常、項目番号は自動的に振られますが、このプロパティを使うことで、JavaScript から各リスト項目の番号を動的に制御できるようになります。 構文 value プロパティの基本的な構文は以下のとおりです。 値の取得 liObject.value 値の設定 liObject.value = 文字列 サンプルコード ここでは、レースの順位リストを例に、value プロパティの実際の動作を確認してみましょう。「アレック
-
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