ボタンがないフォームを処理する方法

256timesの進捗で公開できる情報がないので、またしてもスクールでよく出た話題を紹介してみます。

よく入力フォームだけがあって、送信ボタンがないインターフェースがありますよね。

↑ こういうUIですね。

JavaScriptを学び始めると、ボタンがあればそれにイベントつけていろいろ処理すればいいことがわかります。

ただ、上図のようにボタンがなくて入力フォームだけがあった場合、「ここで何かを入力してエンターキーを押したら、入力した内容が下に表示される」といった課題を出すと「？？？」となってしまう人が多かったような印象があります。

よく見かけたコードは以下のようなものですね。

const input = document.querySelector('input[type="text"]');
input.addEventListener('keydown', e => {
  // e.keyがエンターキーだったら...
});

ただ、実はHTMLでは「formの中にinput要素が一つだけだった場合、エンターキーだけでフォームがsubmitされる」というルールがあります。

したがって、上記のようにkeydownイベントを使わずとも、submitイベントに対して処理を設定するだけでOKだったりします。

ちょっとしたことですが、この知識があるかないかでコーディングがぐっと楽になったりするので覚えておくといいですよ。