WEBサービス開発者は知っておくべき入力フォームトラブル「autocomplete」

WEBブラウザがカオスすぎて、いつも何かしら困惑している、弓削田です。 とあるwebサービスを作っている時の話です。 複数あるページを遷移していくような仕様で、ページ内に入力フォームをたくさん用意しているサイトだったんですが、 とりあえず、完成したので、デバッグをしていた時に、想定していない文字列がいくつかの入力欄に記載されていて、 困惑したという話です。 これは、知っておかないと、WEBブラウザを使ったシステムを開発する時に、陥る可能性のあるトラブルだと思います。

原因究明

まず、どういった文字が入ってくるのかというと、 数字を入力するべき入力欄に、「東京」という文字列が入っていました。 なんじゃこれ！！！！ 確かに、たくさんの入力欄があるので、連動して他の入力値を書き換えるような機能もあるんですが、 はじめはそれらの中にバグがあって、想定していない文字列を書き込んでいるのではないかと疑っていました。 ・・・ でも、何度か入力テストをしているうちに、「東京」って文字を入力していないのに、また入力する項目もないのに何故か「東京」という文字列が入ってくることに気が付きました。 じっくり観察するために、入力しながらどのタイミングで「東京」が入力されているのかを確認すると・・・ 原因発覚！！ メールアドレスを入力した直後でした。 正確には、メールアドレスを入力しようとすると、以前入力したメールアドレス一覧がリスト表示されるので、そのリストを選択したタイミングでした。 これは、「入力履歴の予測候補」とするwebブラウザの「autocomplete」という機能で、住所やメールアドレスなどの個人情報など、過去に入力した内容を記憶しておいてくれて、 次回入力をワンクリックでさせてあげるという、おせっかい機能です。 これでメールアドレスを入力した時に、そのページ内にある、都道府県、住所、電話番号・・・などを自動入力してくれようとしていたんですね。 なんというおせっかい機能！！！

どうやって対応する？

inputタグの任意のname値に反応するようですが、たまたま今回入力欄で「prefecture」というname値が存在していたので、その箇所を「都道府県欄」とブラウザが勘違いしたようですね。 あぶなく、その状態でロンチするところでした・・・お〜〜〜あぶな！！！ とにかく簡易にこの機能を除外するために、該当のメールアドレス欄のinputタグに、autocomplete="new_password"という属性をセットすることで、入力候補が表示されないようになりました。 ユーザーにとっては、いちいち入力するのがめんどくさいため、入力候補機能はあったほうがいいのかもしれませんが、システム的に不具合が起きてしまう可能性があるものは、除外するしかありません。 この機能って、きちんと解説しているリファレンスサイトがほぼなく、Chromeブラウザ以外でもっと別の不具合があるかもしれませんが、とりあえず、スタンダードブラウザということでこの方法で手をうって完了にしておきました。 便利なwebブラウザだけど、こうした落とし穴って意外と多く、開発者がこうした知識を持っていないと、本番公開後にこんなトラブル報告がされたとしたら、とんでもなく調査に時間がかかってしまうだろうし、誰も得しないトラブルだということが分かります。 いや〜WEBエンジニアって、奥深く知識を持っていないといけないんですね。改めて痛感しました。