jQueryとJavaScriptでEnterキー押下を検知するサンプルコード

2024-04-02

jQueryを使用して、キーボードのEnterキー押下を検知するには、主に以下の2つの方法があります。

keydownイベントを使用する: キーが押された時に発生するkeydownイベントを使用します。

keydownイベントを使用する

$(document).keydown(function(event) {
  if (event.keyCode === 13) {
    // Enterキーが押された時の処理
  }
});

上記コードは、document要素にkeydownイベントを登録し、Enterキーが押された時に処理を実行します。

$(document).keypress(function(event) {
  if (event.which === 13) {
    // Enterキーが押された時の処理
  }
});

注意点

keyCodeプロパティとwhichプロパティは、ブラウザによって異なる値を返す場合があります。
日本語入力環境では、Enterキーを押してもkeyCodeプロパティやwhichプロパティに13が返されない場合があります。

この場合、以下の方法でEnterキー押下を検知できます。

keyプロパティを使用する:

$(document).keydown(function(event) {
  if (event.key === "Enter") {
    // Enterキーが押された時の処理
  }
});

inputイベントを使用する:

$("input").on("input", function(event) {
  if (event.target.value === "\n") {
    // Enterキーが押された時の処理
  }
});

$(document).keydown(function(event) {
  if (event.keyCode === 13) {
    alert("Enterキーが押されました！");
  }
});

サンプルコード2：keypressイベントを使用してEnterキー押下を検知

$(document).keypress(function(event) {
  if (event.which === 13) {
    alert("Enterキーが押されました！");
  }
});

サンプルコード3：日本語入力環境でEnterキー押下を検知

$("input").on("input", function(event) {
  if (event.target.value === "\n") {
    alert("Enterキーが押されました！");
  }
});

$(document).keydown(function(event) {
  if (event.key === "Enter") {
    alert("Enterキーが押されました！");
  }
});

サンプルコードの実行方法

上記のサンプルコードは、HTMLファイルに記述してブラウザで開くことで実行できます。

Enterキー押下を検知する他の方法

onkeydown属性を使用する

<input type="text" onkeydown="if (event.keyCode === 13) { alert('Enterキーが押されました！'); }">

addEventListenerメソッドを使用する

const inputElement = document.querySelector("input");

inputElement.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    alert("Enterキーが押されました！");
  }
});

上記コードは、querySelectorメソッドを使用してinput要素を取得し、addEventListenerメソッドを使用してkeydownイベントを登録します。

keyCode以外のプロパティを使用する

keyCodeプロパティ以外にも、whichプロパティやkeyプロパティを使用してEnterキー押下を検知できます。

whichプロパティ:

$(document).keydown(function(event) {
  if (event.which === 13) {
    // Enterキーが押された時の処理
  }
});

$(document).keydown(function(event) {
  if (event.key === "Enter") {
    // Enterキーが押された時の処理
  }
});

フォームのsubmitイベントを使用すると、Enterキーが押された時にフォーム送信を実行できます。

<form onsubmit="return false;">
  <input type="text">
  <button type="submit">送信</button>
</form>

ライブラリを使用する

jQueryなどのライブラリを使用すると、より簡単にEnterキー押下を検知できます。

jQuery:

$(document).keydown(function(event) {
  if (event.keyCode === 13) {
    // Enterキーが押された時の処理
  }
});

JavaScript:

const inputElement = document.querySelector("input");

inputElement.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    // Enterキーが押された時の処理
  }
});

Enterキー押下を検知する方法はいくつかあります。

javascript jquery keyboard-events