JS formで「type=text」等でエンターキーを押すと送信されるのを防ぐ
送信ボタンの有無に関わらず送信されるので防ぐ
作成日:2020-06-05, 更新日:2020-09-23
2020-09-23時点の結論
最初から有効なformのみを対象としているなら問題なかったけど、クリック等により表示されるformたちも対象にする必要があると気付いた。
▼ドキュメント全体を対象に設定
$(document).keypress(function(e){ const key = e.keyCode || e.charCode || 0; if (key == 13) { var cur = document.activeElement; if ( cur.tagName!='INPUT' ) { // 状況に応じて、ココの条件を変えてやればOK return true; } else { e.preventDefault(); } } });
2020-06-05時点の結論
▼エンターキー(キーコード:13)を押したときのイベントを殺す
document.getElementById(〇〇〇).onkeypress = (e) => { const key = e.keyCode || e.charCode || 0; if (key == 13) { e.preventDefault(); } }
textareaの改行
▼上記のヤツだとtextarea内の改行が無効(buttonにフォーカスを当ててのenterキーも無効)になるので、少し修正
document.getElementById(〇〇〇).onkeypress = (e) => { const key = e.keyCode || e.charCode || 0; if (key == 13) { var cur = document.activeElement; if ( cur.tagName!='INPUT' ) { return true; } else { e.preventDefault(); } } }
2020-06-05以前の結論
buttonタグを「type=button」にして、submitを使わない。
経緯
以前は、送信ボタンが無かったときの挙動は記憶にないが、buttonタグの「type=button」で設定するだけでよかった。
2020-06-05時点でbuttonタグに「type=button」を設定しているのにエンターキーを押すとform送信されているのに気づいた。
・・・原因不明。たぶんChromeがユーザーの使い勝手を考えて何かしたと思われる。
「ひらがな入力→漢字に変換→エンターキーで確定」に慣れ切っているので、「英数入力」のあとについ「エンターキー」を押してしまう・・・。
私と同じように慣れ切っている人ってどれくらい多いのかは不明。
だけどエンターキーでの送信を止める方法を調べるとすぐに見つかるので、それなりに多いと思う。
ブラウザの開発者、サイトの開発者のどちらの考えがユーザーの考えに近いのだろう?