374文字
2分
編集

Q. autoComplete/autoFillを完全に防ぎたい

#HTML

#A. 現状、まともな手法では完全に防ぐことが出来なさそう

ref: https://bugs.chromium.org/p/chromium/issues/detail?id=1434624

auto completeauto fill
autocomplete=off無効有効
autocomplete=garbage有効無効
  • AutoFill: Chrome では chrome://settings/autofill に保存したデータに基づいてフォームに入力しようとする。
  • AutoComplete: フィールドに入力された以前の値に基づいてフィールドに入力しようする。

ちなみに AutoFill/AutoComplete は label や name だけでなく、直近の要素の文字列なども加味する。例えば label を付けていない input 要素を大量に並べて、近くに”名前”という文字列を入れた div を置いておくと、ほとんどの input 要素に名前が補完されるようになる。

#ワークアラウンド

#ReadOnly 属性を悪用する

当然 readonly 属性を付けたフォーム要素では autoFill も autoComplete も発火しない。これを悪用して、フォーカスが外れている際に readonly を属性を付与し、他のフォームの影響を受けないようにする。

tsx
<form
  onSubmit={(event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const city = formData.get("city");
    // readOnlyの場合、バリデーションが効かなくなるので代わりの手段が必要
    if (!city) {
      new Error("city is requried");
    }
  }}
>
  <label>
    市区町村
    <input
      name="city"
      // readOnlyを付ければautoFill/autoCompleteが効かない（恐らくこの挙動は環境に依らない）
      readOnly
      onFocus={(event) => {
        // お行儀が悪い
        event.currentTarget.readOnly = false;
      }}
      onBlur={(event) => {
        // お行儀が悪い
        event.currentTarget.readOnly = true;
      }}
    />
  </label>
</form>
編集