フォームでのエンターキー押下時の送信制御

フォームでエンターキー押下時の制御

フォームのinputにフォーカスが当たっている状態でエンターキーを押下すると、
フォームの内容が送信される。
エンターキー押下時で送信させたくない場合は以下のようにjavascriptで制御してやれば良い。

$(document).ready(function(){

  $("#form").on("keypress", function(e) {
    e = e ? e :event;
    var keyCode= e.charCode ? e.charCode : ((e.which) ? e.which : e.keyCode);
    var elem = e.target ? e.target : e.srcElement;
    if (Number(keyCode) == 13) {
        return false;
    }
    return true;
  });
});

フォームに複数ボタンが存在し、エンターキー押下時に送信するボタンを制御したい場合

例えば、div1でエンターキーを押下した場合はbtn1を、
div2でエンターキーを押下した場合はbtn2を送信する。

<form id="form" action="" method="POST">
  <div id="div1">
    <input type="text" />
  </div>
  <input type="submit" id="btn1" value="post">

  <div id="div2">
    <input type="text" />
  </div>
  <input type="submit" id="btn2" value="post">
</form>

$(document).ready(function(){

  $("#div1").on("keypress", function(e) {
    return handleButtonSubmit(e, $("#btn1"));
  });

  $("#div2").on("keypress", function(e) {
    return handleButtonSubmit(e, $("#btn2"));
  });

  function handleButtonSubmit(e, targetButton) {
    // 各ブラウザでイベントの取得方法が異なる
    e = e ? e :event;
    var keyCode= e.charCode ? e.charCode : ((e.which) ? e.which : e.keyCode);
    var elem = e.target ? e.target : e.srcElement;

    if (Number(keyCode) == 13) {
      // inputタグにフォーカスが当たっている場合のみ、ボタンの送信を行う。
      if (elem.tagName == 'INPUT') {
        targetButton.click();
        return false;
      }
    }else{
      return true;
    }
  });
});

以下の記事が参考になりました。

c9katayama.hatenablog.com