input要素でEnterキー入力を検出する方法が、いつの間にかアップデートされていた

フォーム入力などで、テキスト入力してEnterキー入力を検出する方法

いくつか方法があって、簡単に説明すると例えばこんなやり方でしょうか：

1. input要素にキー入力イベントリスナーを設ける方法。
2. form要素のsubmitイベントで処理する方法。

input要素を対象にした方法に絞って、以下の説明を続けます。

よく見る例（非推奨のコードが含まれます）

let text_form = document.getElementById('text_form');
let output = document.getElementById('output');

text_form.addEventListener('keypress', test_ivent);

function test_ivent(e) {
  if (e.keyCode === 13) {
    output.innerHTML = text_form.value;
  }  
  return false;
}

引用元：JavaScript | フォーム内でのEnterキーの入力を取得する方法 | 1 NOTES
https://1-notes.com/javascript-fire-event-of-enter-key/

このコードの問題点

1. keypressイベントは既に非推奨とされており、いつかwebブラウザでのサポートが打ち切られてしまう可能性があること。¹
2. keyCodeプロパティによるキー判別が既に非推奨とされており、いつかwebブラウザでのサポートが打ち切られてしまう可能性があること。²

問題点を解消したコードの例

const text_form = document.getElementById("text_form");
const output = document.getElementById("output");

text_form.addEventListener("keydown", test_event);

function test_event(e) {
  if (e.key === "Enter") {
    output.innerHTML = text_form.value;
  }  
  return false;
}

変更点

1. keypressイベントからkeydownイベントに変更しました。
2. keyCodeプロパティでなくkeyプロパティにして比較してみました。

Element: keydown イベント

Element: keydown イベント - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/keydown_event

keyCodeプロパティは非推奨になっていて、似た役割としてはkeyプロパティとcodeプロパティがあります。

keyプロパティとcodeプロパティの違い

codeプロパティの解説ページにある「結果」で試すとわかりやすいです。

• KeyboardEvent.key プロパティは、ユーザーが押したキーの値を、Shift キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返す
• KeyboardEvent.code プロパティは、（キー入力によって入力された文字ではなく）キーボード上の物理的なキーを表す

例えば、ShiftキーやCtrlキーや（機種によってはAltキーも）役割が同じでも複数存在するようなキーを確実に区別するときには、codeプロパティを使います。
単にEnterキーが入力されたことを検出したい場合には、フルキー側のEnterでもテンキー側のEnterでもどちらでも構わないと考えて、この場合はkeyプロパティを使うべきでしょう。

keyプロパティと比較するためのキーの値のリストはこちらにあります。 気になる方はどうぞ：

Key values for keyboard events - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values

Enterキーで検索ボタンクリックさせたい

const text_form = document.getElementById("text_form");

text_form.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    const btn_search = document.getElementById("btn_search");
    btn_search.dispatchEvent(new PointerEvent("click"));  // clickイベントを発生させて、送り込む
    e.preventDefault();  // Enterキー入力を他に伝搬させないために
  }  
  return false;
});

1. Element: keypress イベント - Web API | MDN
   https://developer.mozilla.org/ja/docs/Web/API/Element/keypress_event ↩

2. KeyboardEvent.keyCode - Web API | MDN
   https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode ↩