input 要素上で、ブラウザの Auto Fill による入力か否かを判別できるか
ブラウザの Auto Fill 機能
昨今の Web ブラウザには、便利な機能として、"Auto Fill" の機能があります。
これは form や input といった要素で構成された入力フォームに何か入力して送信すると、そのときの input 要素に入力した内容をブラウザが覚えていてくれてる機能です。そして次回、同じフォームの同じ入力欄をクリックすると、前回入力した内容が候補としてポップアップ表示され、その候補から選べば、前回入力したのと同じ内容を手間なく入力できる、というものですね。
Auto Fill からの入力かどうか判別できる?
さてところで、クライアント Web アプリケーションの JavaScript コードから、一般的なキーボードからの入力やクリップボードからの貼り付けと、この Auto Fill による入力とを、区別することができるでしょうか?
なお、Auto Fill 機能は、現時点では Web 標準としての仕様・規約はないようです。つまり今日現在、Auto Fill の機能はブラウザごとに独自の仕様で実装されているため、ブラウザが違えば Auto Fill の挙動も異なるようです。そのような状況ですから、将来に渡って安定した振る舞いはあまり期待できません。
その点を承知した上で、今日現在として、Auto Fill からの入力を判別できるか、試してみました。
input イベントの引数から判断できるかも?
結論としては、input 要素の input イベントの引数を見ることで、ある程度の確度で判別できそうでした。しかし絶対確実には判定できなさそうです。
まず、一般的なキーボードからの入力やクリップボード操作によって発生する input イベントですが、そのイベント引数には InputEvent オブジェクトが渡されます。この InputEvent オブジェクトには、「どのような入力があったのか (キー打鍵による文字挿入 / Backspace による削除 / Delete による削除 / クリップボードへの切取 / クリップボードからの貼付 / などなど...)」を示す inputType プロパティをはじめ、入力に関するさまざまなプロパティが公開されています。
いっぽうで、Auto Fill による入力の場合も input イベントは発生しました。その Auto Fill による入力で発生した input イベントのイベント引数を観察してみたところ、どうやら普通の入力と Auto Fill からの入力とで差異があることがわかりました。
ただ、ブラウザの種類によって一貫性はありませんでした。試してみた環境ですが、OS は Windows 11 25H2、Ubuntu 25.04、macOS Tahoe、iOS 26、Android 16、ブラウザは Microsoft Edge、Google Chrome、Mozilla Firefox、Apple Safari になります。以下に順に調べた結果を記します。
Microsoft Edge/Google Chrome/Apple Safari の場合
input イベントのイベント引数の型は、通常は InputEvent 型であるかと思います。しかし Microsoft Edge、Google Chrome、Apple Safari 上では、Auto Fill からの入力の場合は、input イベント引数オブジェクトの型が、InputEvent ではなくて、汎用の Event 型でした。
そのため、以下のようなコードで、input イベントの引数の型が InputEvent であるか否かを判定することで、Auto Fill からの入力を一定の精度で区別できることになります。
inputElement.addEventListener("input", (ev) => {
if (ev instanceof InputEvent) {
console.log("普通の入力");
} else {
console.log("Auto Fill の入力 (かもしれない)");
}
});
しかし、input イベントの引数が汎用の Event 型になるユーザー操作は、Auto Fill による入力以外にも、まだ他にあるかもしれません。自分が調べた限りではそのようなユーザー操作は見つかっていないのですが、先に述べたとおり Auto Fill に関する文書化された仕様がないようですので、油断はなりません。そのため、input イベント引数の型が Event 型であったというだけで Auto Fill からの入力であると断定するのは、心許ありません。
ちなみに、今回の記事の主旨とは別の話になりますが、「input イベントのイベント引数の、inputType プロパティの値に応じて分岐」するプログラムを書いている場合、この inputType プロパティの値が undefined になる場合を想定していないと、Auto Fill からの入力があった場合にうまく処理できないことになります。Auto Fill からの入力は、実は厄介かもしれませんね...。
Mozilla Firefox の場合
Mozilla Firefox 上では input イベントのイベント引数の型は、Auto Fill の場合であっても InputEvent 型でした。いっぽうで、イベント引数オブジェクトの inputType プロパティの値は "insertReplacementText" でした。
そのため、若干雑なコードになりますが、以下のようなコードで、Firefox の場合でも Auto Fill からの入力を判定できそうです。
inputElement.addEventListener("input", (ev) => {
if (ev instanceof InputEvent && ev.inputType !== "insertReplacementText") {
console.log("普通の入力");
} else {
console.log("Auto Fill の入力 (かもしれない)");
}
});
しかし調べてみたところ、inputType プロパティ値が "insertReplacementText" となるのは、Auto Fill による入力だけではなさそうでした。InputEvent に関しては W3C による仕様策定があるようで、下記リンク先に、inputType プロパティが取りうる値の一覧が掲載されています。
上記リンク先で "insertReplacementText" についての説明を見ると、下図のように記述されています。
これを読むと、"insert or replace existing content by means of a spell checker, auto-correct, writing suggestions or similar"、すなわち、Auto Fill による入力だけでなく、スペルチェッカーなどの自動修正の場合も、inputType に "insertReplacementText" が設定されたイベント引数で input イベントが発生するようです。Firefox の場合も Auto Fill による入力だけを選別することは難しいようです。
Auto Fill による入力だけを確実に区別することは難しそう
以上、input イベントのイベント引数を確認することで、Auto Fill によるもの "かもしれない" 入力というのを判別できるらしいことがわかりました。残念ながら、絶対確実に Auto Fill による入力だけを選び抜くことは難しそうです。
また、前述のとおり現状は Auto Fill 機能はブラウザ実装者によって独自に作り込まれているようですから、今後、Auto Fill での入力による input イベントの振る舞いが、さらに変更されることも充分あり得ます。
まとめ
以上、残念ながら自分が調べたり試した限りでは、Auto Fill による入力を絶対確実に判別することは難しいようでした。ただし、現状のブラウザ実装に依存した、input イベントのイベント引数の型の振る舞いから、ある一定の確度で判別することは可能でした。
あくまでも個人的な事情ですが、ブラウザの Auto Fill 機能についても何らか標準化が進み、input イベントで安心して取り扱えるようになるとよいな、と考えさせられました。
Discussion