01 / 03
ボタンを押すのは、地味に面倒
前の回のアプリ、打ってから毎回ボタンを押しているよね。スマホでも打ち終わったらそのまま確定したい。
入力欄を form で囲むと、Enter キー（スマホなら確定キー）でも「ふやす」が押されたのと同じことが起きるようになるよ。
<form id="form" class="row"> <input id="task"> <button id="add">ふやす</button></form>やることリストを作る
INPUT · スライド
Enter キーでもふやす
01 / 03
ボタンを押すのは、地味に面倒
02 / 03
ただし、そのままだと画面が消える
form にはもともとの仕事がある。中身をサーバーに送って、ページを読み込み直すという仕事だよ。ホームページに問い合わせフォームがあった時代からの決まりごとなんだ。
だから囲んだだけで試すと、ふやしたはずのリストが一瞬で消える。読み込み直されて、まっさらな状態に戻っているんだ。
03 / 03
「いつもの仕事はしないで」と伝える
止めるのが event.preventDefault() だよ。このできごとの、もともとの動きをやめさせるという意味。
submit のときに受け取る event に対して呼ぶ。1行書くだけで読み込み直しが止まって、自分で書いた処理だけが動くようになるよ。
form.addEventListener("submit", (event) => { event.preventDefault() // ここから先は自分の処理})