jQueryでキーボード操作を検知: keypress、keydown、keyupイベントの違い

jQuery Event Keypress: 押されたキーを検知する

イベントの種類

キーボード操作には、keydown、keypress、keyupの3種類のイベントがあります。

• keydown: キーが押された瞬間
• keypress: キーが押されて離れた瞬間 (一部のブラウザではkeydownと同じ)

keypressイベントは、押されたキーの文字を取得したい場合に適しています。

イベントハンドラの設定

keypressイベントハンドラは、以下の形式で設定できます。

$(selector).on('keypress', function(event) {
  // 処理
});

• selector: イベントハンドラを設定する要素
• event: イベントオブジェクト

押されたキーの取得

イベントオブジェクトのwhichプロパティを使って、押されたキーのキーコードを取得できます。

$(document).on('keypress', function(event) {
  var keycode = event.which;
  // keycodeを使って処理
});

キーコードと対応する文字は以下の表の通りです。

例

以下の例では、Aキーが押された時にdiv要素のテキストを「Aキーが押されました」に変更しています。

$(document).on('keypress', function(event) {
  var keycode = event.which;
  if (keycode === 65) {
    $('div').text('Aキーが押されました');
  }
});

まとめ

keypressイベントを使うことで、特定のキーが押された時に処理を実行することができます。

その他

• keydownイベントとkeyupイベントも同様に使用できます。
• 特定のキー以外のキーを押した時に処理を実行したい場合は、if文を使って判定できます。
• 複数のキーを同時に押した時に処理を実行したい場合は、event.ctrlKeyやevent.shiftKeyなどのプロパティを使って判定できます。

押されたキーを表示する

<input type="text" id="textbox">
<div id="output"></div>

$(document).on('keypress', '#textbox', function(event) {
  var keycode = event.which;
  var text = String.fromCharCode(keycode);
  $('#output').text('キーコード: ' + keycode + ', 文字: ' + text);
});

特定のキーで処理を実行する

<div id="div"></div>

$(document).on('keypress', function(event) {
  var keycode = event.which;
  if (keycode === 65) {
    $('#div').text('Aキーが押されました');
  }
});

複数のキーを同時に押した時に処理を実行する

<div id="div"></div>

$(document).on('keypress', function(event) {
  var keycode = event.which;
  if (event.ctrlKey && keycode === 65) {
    $('#div').text('CtrlキーとAキーが押されました');
  }
});

イベントハンドラは、off()メソッドを使って解除できます。

$(document).off('keypress');

まとめ

これらのサンプルコードを参考に、keypressイベントを様々な用途で使用してみてください。

他の方法

keydownイベントは、キーが押された瞬間に発生します。keypressイベントと比べて、押されたキーをより早く検知することができます。

$(document).on('keydown', function(event) {
  // 処理
});

$(document).on('keyup', function(event) {
  // 処理
});

inputイベントは、テキスト入力欄の内容が変更された時に発生します。キー入力だけでなく、コピーやペーストによっても発生します。

$(document).on('input', '#textbox', function(event) {
  // 処理
});

changeイベントは、テキスト入力欄の内容が変更されて、フォーカスが外れた時に発生します。

$(document).on('change', '#textbox', function(event) {
  // 処理
});

まとめ

これらのイベントを使い分けることで、様々な目的に対応することができます。

• 押されたキーをすぐに検知したい場合は、keydownイベントを使う。
• テキスト入力欄の内容が変更されたことを検知したい場合は、inputイベントを使う。