jQuery キーコード 一覧: ウェブサイトにキー入力イベントを実装するための完全ガイド
はじめに: キーボードイベントとキーコードの基礎知識
キーボードは、ユーザーがウェブサイトと対話するための主要な手段の一つです。ユーザーがキーボードのキーを押したり、離したりする度に、ウェブサイトはその情報を処理し、適切なアクションを実行することができます。ここでは、ウェブサイトにキー入力イベントを実装するための基礎知識として、キーボードイベントとキーコードについて解説します。
キーボードイベント
キーボードイベントとは、ユーザーがキーボードを操作した時に発生するイベントのことです。代表的なキーボードイベントは以下の３つです。
- keydown: キーが押された瞬間に発生するイベント
- keypress: キーが押され、文字が入力される時に発生するイベント (keydown と keyup の間に発生)
- keyup: キーが離された瞬間に発生するイベント
キーコード
キーコードは、各キーに割り当てられた固有の数値です。キーボードイベントが発生した際に、どのキーが操作されたかを識別するために使用されます。例えば、「Enter」キーのキーコードは「13」、「Esc」キーのキーコードは「27」といったように、それぞれのキーに固有のキーコードが割り当てられています。
jQuery でのキーボードイベント処理
jQuery を使用すると、キーコードを利用してキーボードイベントを簡単に処理することができます。jQuery では、以下のようにキーボードイベントを処理することができます。
$(document).keydown(function(event) {
// キーが押された時の処理
console.log("キーが押されました。");
});
$(document).keypress(function(event) {
// キーが押され、文字が入力される時の処理
console.log("キーが入力されました。");
});
$(document).keyup(function(event) {
// キーが離された時の処理
console.log("キーが離されました。");
});
主要キーコード一覧表
ウェブサイトでよく利用されるキーコードをまとめた表です。これらのキーコードを参考に、ウェブサイトに様々なキー入力イベントを実装することができます。
| キー | キーコード | 説明 | jQuery イベント |
|---|---|---|---|
| Backspace | 8 | 入力した文字を削除 | keydown, keyup |
| Tab | 9 | カーソルを次の入力欄へ移動 | keydown, keyup |
| Enter | 13 | 入力確定、改行 | keydown, keyup |
| Shift | 16 | シフトキー | keydown, keyup |
| Ctrl | 17 | コントロールキー | keydown, keyup |
| Alt | 18 | オルトキー | keydown, keyup |
| Esc | 27 | キャンセル、エスケープ | keydown, keyup |
| Space | 32 | スペースキー | keydown, keyup |
| Page Up | 33 | 前ページへスクロール | keydown, keyup |
| Page Down | 34 | 次ページへスクロール | keydown, keyup |
| End | 35 | 行末にカーソルを移動 | keydown, keyup |
| Home | 36 | 行頭にカーソルを移動 | keydown, keyup |
| 左矢印キー | 37 | 左にカーソルを移動 | keydown, keyup |
| 上矢印キー | 38 | 上にカーソルを移動 | keydown, keyup |
| 右矢印キー | 39 | 右にカーソルを移動 | keydown, keyup |
| 下矢印キー | 40 | 下にカーソルを移動 | keydown, keyup |
| Delete | 46 | カーソル後の文字を削除 | keydown, keyup |
| 0 - 9 | 48 - 57 | 数字キー | keydown, keyup |
| A - Z | 65 - 90 | アルファベットキー (大文字) | keydown, keyup |
| F1 - F12 | 112 - 123 | ファンクションキー | keydown, keyup |
| Num Lock | 144 | テンキーのオン/オフ | keydown, keyup |
jQuery でのキーコード取得方法
jQuery でキーコードを取得するには、イベントオブジェクトの which プロパティを使用します。 which プロパティは、キーボードイベント発生時に押されたキーのキーコードを返します。
$(document).keydown(function(event) {
var keyCode = event.which;
console.log("キーコード: " + keyCode);
});
キーコードを利用した実践的な jQuery コード例
1. Enter キーでフォーム送信
Enter キーを押した時にフォームを送信する例です。 event.preventDefault() を使用することで、Enter キーを押した時のデフォルトの動作 (改行) を無効化しています。
$(document).keydown(function(event) {
if (event.which === 13) { // Enterキーが押された場合
event.preventDefault(); // デフォルトの動作（改行）を無効化
$("#myForm").submit(); // フォーム送信
}
});
2. 矢印キーで画像を移動
矢印キーを使って画像を上下左右に移動させる例です。キーコードに対応する矢印キーが押された場合に、画像の位置を調整しています。
$(document).keydown(function(event) {
var img = $("#myImage");
var position = img.position();
var moveAmount = 10; // 移動量
switch (event.which) {
case 37: // 左矢印キー
img.css("left", position.left - moveAmount + "px");
break;
case 38: // 上矢印キー
img.css("top", position.top - moveAmount + "px");
break;
case 39: // 右矢印キー
img.css("left", position.left + moveAmount + "px");
break;
case 40: // 下矢印キー
img.css("top", position.top + moveAmount + "px");
break;
}
});
まとめ: キーコードを使いこなして、よりインタラクティブなウェブサイトを
jQuery とキーコードを組み合わせることで、ユーザーフレンドリーなウェブサイトを構築することができます。今回紹介した情報をもとに、ご自身のウェブサイトにキー入力イベントを実装し、ユーザーにとってより快適で使い心地のよいウェブサイトを目指しましょう。
関連情報
Q&A
Q1: キーコードはブラウザによって異なる？
A1: いいえ、キーコードはブラウザ間でほぼ統一されています。ただし、一部の古いブラウザや特殊なキーボードでは、異なるキーコードが割り当てられている場合があります。そのため、クロスブラウザ対応を行う場合は、各ブラウザでの動作確認が重要です。
Q2: キーボードイベントとキーコードは、どのような場面で活用できる？
A2: キーボードイベントとキーコードは、ゲーム開発、ショートカットキーの実装、アクセシビリティの向上など、様々な場面で活用できます。例えば、ゲーム開発では、ユーザーのキー入力によってキャラクターを操作したり、攻撃したりすることができます。また、ショートカットキーの実装によって、ユーザーはキーボード操作だけでウェブサイトの様々な機能を利用できるようになり、操作性が向上します。さらに、アクセシビリティの向上という点では、キーボード操作のみでウェブサイトを利用できるようにすることで、マウスが使えないユーザーでもウェブサイトにアクセスできるようになります。
Q3: jQuery 以外の方法でキーコードを取得することはできる？
A3: はい、JavaScript の標準的な API を使用してキーコードを取得することもできます。 event.keyCode プロパティを使用することで、jQuery を使用せずにキーコードを取得できます。ただし、 event.keyCode は古い API であり、将来的に廃止される可能性があります。そのため、jQuery を使用しない場合は、 event.code プロパティを使用することが推奨されます。 event.code は、キーの物理的な位置を表す文字列を返すため、より正確なキー入力を検出できます。
その他の参考記事:jquery keyup 発火