エンターキーでsubmitしたくないフォームをJavaScriptで制御する

入力フォームを選択した状態でエンターキーではsubmitしたくない(送信ボタンを押下した時だけsubmitしたい)場合、以下JSで制御できる。

// 当該formのdata属性にdisallow-enter-submitを指定している前提
const forms = Array.from(document.querySelectorAll('form')).filter(el => el.getAttribute('data-disallow-enter-submit'));
if (!forms.length) return;

for (let i = 0; i < forms.length; i += 1) {
  const form = forms[i];
  form.addEventListener('keydown', e => {
    if (
      ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) && e.target.tagName !== 'TEXTAREA'
    ) {
      e.preventDefault();
      return false;
    }
    return true;
  });
}

補足

((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) && e.target.tagName !== 'TEXTAREA'

• 13はエンターキーのこと。
• whichとkeyCodeの両方を指定しているのは、ブラウザによって挙動が異なるため。
• テキストエリア(複数行)を選択した状態だと、改行のためにエンターを押しただけでイベントがトリガーされて改行ができなくなってしまうため、TEXTAREAでない場合という条件も追加している。