フォームでのエンターキー押下時の送信制御
フォームでエンターキー押下時の制御
フォームの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; } }); });
以下の記事が参考になりました。