jquery キーコード一覧

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 発火

jQuery キーコード 一覧: ウェブサイトにキー入力イベントを実装するための完全ガイド