JavaScriptでEnterキーを無効にする：イベントとサンプルコード

2024-04-02

JavaScriptでWebフォームのEnterキー送信を無効にする

onsubmit属性を使う

最も簡単な方法は、formタグにonsubmit属性を設定する方法です。この属性にreturn false;を記述することで、フォーム送信をキャンセルできます。

<form onsubmit="return false;">
  ...
</form>

メリット:

記述量が少なく、シンプルに実装できる

JavaScriptが有効でない環境では動作しない
フォーム内のすべての入力欄でEnterキーが無効になる

type="button"を使う

inputタグのtype属性をsubmitからbuttonに変更することで、Enterキーによる送信を無効化できます。

<input type="button" value="送信">

個別に送信ボタンを設定できる

JavaScriptでクリックイベントを処理する必要がある

event.preventDefault()を使う

JavaScriptを使って、event.preventDefault()メソッドを実行することで、Enterキー押下時のデフォルト動作をキャンセルできます。

<form>
  ...
  <input type="text" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }">
</form>

フォーム送信以外の処理も記述できる

JavaScriptの知識が必要

上記以外にも、jQueryなどのライブラリを使って簡単に実装する方法もあります。

注意事項

上記の方法は、ブラウザや環境によって動作が異なる場合があります。
フォーム送信を無効にする場合は、代替手段を用意する必要があります。

onsubmit属性を使う

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

type="button"を使う

<form>
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="button" value="送信" onclick="submitForm()">
</form>

<script>
function submitForm() {
  // フォーム送信処理
}
</script>

event.preventDefault()を使う

<form>
  <input type="text" name="name" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="text" name="email" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="submit" value="送信">
</form>

他の方法

keydownイベントは、キーが押された時に発生します。このイベントを使って、Enterキーが押された時にpreventDefault()メソッドを実行することで、送信をキャンセルできます。

<form>
  <input type="text" name="name" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="text" name="email" onkeydown="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="submit" value="送信">
</form>

<form>
  <input type="text" name="name" onkeypress="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="text" name="email" onkeypress="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="submit" value="送信">
</form>

<form>
  <input type="text" name="name" onkeyup="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="text" name="email" onkeyup="if (event.keyCode === 13) { event.preventDefault(); }">
  <input type="submit" value="送信">
</form>

jQueryなどのライブラリを使うと、より簡単にEnterキー送信を無効化できます。

<form>
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="submit" value="送信">
</form>

<script>
$(function() {
  $('form').submit(function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
    }
  });
});
</script>