More than 1 year has passed since last update.

ChromeとSafariでの入力欄の自動補完を無効にする方法

Posted at 2023-08-23

事象

Webサービスにログインする際、Chromeのメールアドレスとパスワードの保存機能を使用すると、意図せぬ箇所に情報が自動補完されることがあります。特に、会員登録画面などでこの現象が発生しました。

Safariの場合、該当の入力欄にautoComplete="off"を追加することで問題を解消できます。しかし、Chromeではこの方法だけでは効果がありません。Chromeの場合は、autoComplete="new-xxx"を使用することで解消できます。

<input
  type={"email"}
  autoComplete="new-email"
/>

<input
  type={"password"}
  autoComplete="new-password"
/>

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！