JS formで「type=text」等でエンターキーを押すと送信されるのを防ぐ

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がユーザーの使い勝手を考えて何かしたと思われる。

「ひらがな入力→漢字に変換→エンターキーで確定」に慣れ切っているので、「英数入力」のあとについ「エンターキー」を押してしまう・・・。
私と同じように慣れ切っている人ってどれくらい多いのかは不明。
だけどエンターキーでの送信を止める方法を調べるとすぐに見つかるので、それなりに多いと思う。

ブラウザの開発者、サイトの開発者のどちらの考えがユーザーの考えに近いのだろう？