（2022.1.11 記）
Webシステム開発時に初学者がハマる１つかなと。
Form（特にSubmitボタン付き）内にテキストボックス等（Input属性）を配置した際、エンターキーを空打ちすると、先にボタン押下処理が走っちゃうという所です。
これは、Input属性内でエンターキーが押下された場合にFormタグ内の情報をPOST/GET処理させる仕様になっているためです。
（これを解消すべく、エンターキそのものを無効化させてもいいですが、今度はFormタグ内にテキストエリア（textarea属性）を配置させていた場合、テキストエリア内でエンターキーによる改行ができなくなってしまうという問題が発生し、ちょっとハマった。。。）
この現象を回避する方法は考え方によって様々ありますが、調べた中で自分が一番しっくり来た方法にアレンジを加えたものを忘備録として以下に記載していきます。
要点だけ説明すると、Javascriptを用いて、Form内のInput属性やボタンがエンターキーで押された場合の処理を、「何もしない」ように変更させたという感じです。
（全行程の所要時間：コピペで終わり）
０．実行環境
■実行環境
・さくらVPN（メモリ：１GB、CPU：２コア、SSD：１００GB）
・LinuxOS：Ubuntu18.04
・Apache：2.4
・MySQL：5.7
・PHP：7.2
１．解決方法
①以下の文を<script>タグで囲ってあげて、</body>の直前にコピペ
//Input属性のEnter無効化（テキストエリアはInput属性じゃないのでEnterが利く）
$(function(){
$('input').keypress(function(e){
if(e.which == 13) {
return false;
}
});
});
上記をコメント分を除いて１行目から説明すると・・・
１：「何かしらのアクションがあった際」にトリガーになって起動する関数定義
２：もしInput属性で何かしらのキーが押下されたら下記の処理を行う
３：もしそれがエンターキーだったら下記の処理を行う（キーナンバー＝１３→エンターキー）
４：Falseを返す（何もしない）
２行目の「input属性」を指定していることろがミソで、コメント文にもありますが、これによってテキストエリア内のエンターキーは生きるようになります。
②ボタンそのもののエンターキー処理をコロす
onkeypress="if(event.keyCode==13){event.returnValue=false}"
ボタンそのものの要素（class=”” とか name=”” 等）の１つで、「onkeypress」要素として以下のように書き加える感じです。
意味合いとしては①と全く同じです。（エンターキーが押下されたら何もしない。）
そもそも①でInput属性のエンターキー処理はコロしてあるので、これは保険かつ、Input属性じゃないただのボタン（例えば別ページに移動処理するボタンとか）に偶然カーソルが当たってエンターキーが押されたら困るので、ボタンの方にも書いておいた感じです。
（なくてもいいけど、合って困るものでもないし・・・）
以上。
２．最後に
JavascriptやJQueryを用いると何でもできて便利ですが、処理の組合せを考えるのが難しいんですよね・・・。
当方多言語に渡って開発経験がありますが、やはりプログラムとはパズルゲーみたいな側面があるなと感じました。
以上。
（不明点あればコメント頂ければ、可能な限りお答えします。）
コメント