【jQuery/JavaScript】入力フォームで"Enter押すだけで送信"を無効化する

JavaScript/jQuery HTML/CSS

もくじ

どういうときに無効化するか

どういうときに便利かというと、単純に誤送信を防げます。

また、二重送信防止対策をしている場合にも役に立つことがあります。例えば、必須項目を埋め切っていないのにEnterを押してしまってバリデーションが発火したとき、ボタンを二重送信防止をしているためにボタンがおせなくなる。。。なんてことも、このEnter無効化によって防止できます。

Enterでの送信を無効化

まずはjQueryを読み込んでおいてください。

inputタグ

<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;
    }
  });
});
</script>

これだけです。

<input>タグでEnterキーが無効化されるようになっています。

selectタグ

<select>タグにも適用したい場合は追加してください。

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

参考URL

Enterキーでフォームが送信されないようにする | スパイラル ディベロッパーズサイト｜パイプドビッツ