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

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)); 
}