1Password のオートコンプリート機能をサービス提供側で無効化する

Leaner Technologies の @corocn です。

最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。

画像はshadcn/ui - dialogから拝借

結論

input に data-1p-ignore 属性を付与する

autocomplete="off" しても空気読んで無効化してくれないので注意。

<input type="text" id="username" name="ig" data-1p-ignore>

実は公式のドキュメントにさらっと書いてありました。
https://developer.1password.com/docs/web/compatible-website-design/

LastPassの場合は？

data-lpignore 属性を付与する

統一してハイフン入れてほしかった感

https://support.lastpass.com/s/document-item?language=en_US&bundleId=lastpass&topicId=LastPass/c_lp_prevent_fields_from_being_filled_automatically.html&_LANG=enus

日本語の記事がなかったので役に立てば幸いです。