autofillによる入力値であるかの判定

フォームの入力値がブラウザのautofill機能によるものかは、フォームが:-webkit-autofillセレクタを持っているかで判定できる。
Firefoxの場合は:-webkit-autofillセレクタを取得できないが、autofill時に発生するinputイベントにdetailプロパティ(マウスイベント、キーイベントの場合のみ含まれている)が存在するかで判定できる。

function hasAutofill(input, detail) {
  var isAutofilled = false;

  try {
    isAutofilled = Boolean(input.parentNode.querySelector(':-webkit-autofill'));
  } catch (e) {
    // firefoxはautofillセレクタが取得できないので、detailプロパティ(マウスイベント、キーイベントの場合のみ含まれている)が存在するかで判定する
    isAutofilled = Boolean(detail === 'undefined');
  }

  return isAutofilled;
}

function onInput(e) {
  var detail = typeof e.detail;
  console.log(hasAutofill(e.target, detail));
}