:autofill 擬似クラスを使ったサンプル

:autofill 擬似クラスとは
  • :autofill はCSSの擬似クラスで、 <input> 要素の値がブラウザーによって自動補完された時に一致する
  • ユーザーが自動補完されたフィールドを編集すると、一致しなくなる
  • フォームでオートフィルされたフィールドは、JavaScriptから :autofill 擬似クラスで取得可能

CSSで自動補完された際にborderを変更するサンプル
  • オートコンプリートの自動補完で入力すると、入力欄が緑破線に変わる
  • オートコンプリートの自動補完で入力すると、自動補完されたテキストが別枠に表示される


コード

HTML

<input type="text" name="name" placeholder="山田太郎" autocomplete="name" />
<textarea name="result" readonly rows="1"></textarea>

CSS

#container input[type="text"]:autofill {
  border: dashed 2px green;
}

JavaScript

const inputElem = document.querySelector('input[name="name"]');
const resultElem = document.querySelector('textarea[name="result"]');
inputElem.addEventListener('input', () => {
  const autofillValue = document.querySelector('input[name="name"]:autofill')?.value;
  resultElem.value = autofillValue ?? '';
});