はじめに
こんにちは。レバテック開発部でオウンドメディアの開発を担当しています、金井です。
HTMLのinputタグを使って入力フォームを作成することがあるかと思いますが、今回はその入力フォームについて、1つ怖いお話をしようと思います。
何が起こったか
気づくまでの経緯
エントリーフォーム上でのユーザーの行動を分析していたところ、不可解な遷移をしているユーザーがいることがログからわかりました。
通常だと、画像のような遷移をして登録完了画面に遷移するはずなのですが
メールアドレス入力画面の後に、入力したであろうメールアドレスがクエリパラメータとして付与されて、最初の「希望契約形態の選択画面」に戻っているというものでした。（電話番号入力画面でも同じような事象が確認できました）
最初の設問に戻ってしまうということは、リロードのようなものが走っているのかと思いました。
しかし、再現方法がなかなか見つからず諦めかけたその時
メールアドレス入力画面でEnterキーを押すと再現するぞっ
と、他のメンバーが発見してくれました。
再現方法がわかったので、原因の調査へと移りました。
何が原因だったか
しかし、再現方法がわかったとはいえ、原因にたどり着くまでにも時間がかかりました。。
社内の他媒体では発生していなかったので、何が違うんだろうと見比べたところ、あることに気づきます。
入力フォームが1画面に1つしかない UI でしか再現しないな…
たしかにエントリーフォーム登録画面のメールアドレスと電話番号の入力フォームは、1画面に1つという UI になっていました。
そこで、「inputタグ 1つ Enter」とかで調べてみると、以下の記事にたどり着きました。
submitボタンがなくてもEnterキーを押したらsubmitされる！？
HTMLの仕様が原因ということがわかったので、修正作業に移りました。
If the form has no submit button, then the implicit submission mechanism must perform the following steps:
- If the form has more than one field that blocks implicit submission, then return.
- Submit the form element from the form element itself with userInvolvement set to "activation".
For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, Telephone, URL, Email, Password, Date, Month, Week, Time, Local Date and Time, Number
どうやって修正したか
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.
HTMLの仕様によると、デフォルトボタンが無効な状態であればこの問題を回避できそうです。
Vue.jsで実装されていたということもあり、以下の記事を参考にformタグのsubmit処理をonsubmit="return false;"としました。
return falseすることによってフォーム送信をキャンセルでき、「デフォルトボタンが無効な状態」をつくることができます。
これにて再現しなくなったので、めでたしめでたし。
余談
そもそもsubmitしない画面で、formタグ使ってるのがよろしくないんじゃないかという話が社内でも挙がったので、HTML構造の見直しも進めていく予定です。
まとめ
HTML難しい。。
Discussion