ブラウザのパスワードマネージャーに任意の値を覚えさせたい
ブラウザがID（ユーザー名）とパスワードを保存してくれる機能があります。
ユーザー登録フォームを作っていた時に、その機能が覚えてほしいIDを覚えてくれなかったので、任意のものに変更できないかと探った時の備忘録です。
よくあるNG例
ng-form.html
<form>
<input type="text" name="id" />
<input type="text" name="name" />
<input type="password" name="password">
</form>
たぶんよくあると思うんですけど、ユーザーにIDを登録させて、それとは別に氏名を登録させるタイプのフォームです。
でもログインにはIDとパスワードを用いてほしい。
この場合、私がそうだったのですが、氏名の方がブラウザのパスワード管理機能に登録されてしまうんですよね。
OK例
ok-form.html
<form>
<input type="text" name="id" />
<input type="text" name="name" />
<!-- 下のIDは上のIDと同じ値を持たせてください -->
<input type="text" hidden name="id" autocomplete="username" />
<input type="password" name="password">
</form>
必要な要素
- 非表示でパスワードマネージャーに登録したい要素をパスワードの直前に置く
- 登録したい要素にautocomplete="username"を追加する
検証と考察
ブラウザのパスワードマネージャーはIDだったりをどう認識、検知、判断しているのか？
パスワードの直前にあるinput要素を参照
→ブラウザによって非表示を無視するパターンと無視しないパターンがある
デザインなどの事情で直前に配置できないことも多々あると思います。
autocomplete="username"をもたせるとパスワードの直前にあるinput要素でなくても優先してくれたので、その両方を入れることで対応しました。
ブラウザごとの仕様を知っている方がいたら是非教えてください……。。。
autocompleteについて
autocompleteそのものについてのドキュメントは以下です
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete
これを参照すると、name="neme"がいたからidより優先されてしまったのかな…と思います
usernameはユーザー名またはアカウント名を指すようなので。
この属性は、ブラウザに住所などなどを覚えてもらうときにも重宝しそうです。