LoginSignup
3
1

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

Posted at

フォーム入力などで、テキスト入力して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ブラウザでのサポートが打ち切られてしまう可能性があること。1
  2. keyCodeプロパティによるキー判別が既に非推奨とされており、いつかwebブラウザでのサポートが打ち切られてしまう可能性があること。2

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

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1