Enterキーでフォームが送信されないようにする

こんにちは!若手エンジニアのスパ子です(‘-‘*)

フォームの入力中、誤ってEnterキーを押してしまい、予期しない挙動が発生してしまう時があります。

今回はEnterキーでフォームが送信されないようにする方法をご紹介します。

参考DEMOはこちら入力の途中でEnterキーを押してもsubmitされません。

1. jQueryを利用するためjQueryを読み込みます。

2. 以下のコードを</head>の前に貼り付けます。

<script type="text/javascript">
$(function(){
  $("input").on("keydown",function(ev){
    if ((ev.which && ev.which === 13) ||(ev.keyCode && ev.keyCode === 13)){
      return false;
    } else {
      return true;
    }
  });
});

$(function(){
$("select").focus(function(){
  $(this).on("keydown",function(ev){
    if ((ev.which && ev.which === 13) ||(ev.keyCode && ev.keyCode === 13)){
      return false;
    } else {
      return true;
    }
  });
});
});
</script>

<input>タグと<select>タグを選択している場合、Enterキーを押しても反応しないよう、jQueryでEnterキーを無効化しています。

以上で設定は完了です。

最後まで読んでいただき、ありがとうございました(*^^*)!