v147 · JavaScript · Forms · Origin Trial
Compatibility Lab
Detects whether the autofill event is supported via 'onautofill' in HTMLInputElement.prototype and the AutofillEvent constructor. Simulates native autofill filling on the demo form and compares the clean autofill event signal against the legacy heuristics (input with no data, animationstart on :autofill). Provides a universal detection + fallback pattern.
API probes
Live form test
Click "Simulate autofill" to programmatically fill the form — then watch which events fire.
Autofill event listener
event log…
Detection method comparison
| Method | Works without OT | False positives | Reliability |
|---|---|---|---|
| autofill event (Chrome 147+) | Requires OT | None | Exact |
| input event + no InputEvent.data | Always | Some (paste, speech) | Fragile |
| :autofill + animationstart | Always | Very few | Timing-dependent |
| Polling :autofill in CSS | Always | None | Expensive |
Fallback pattern
/* Detect autofill event support */
const HAS_AUTOFILL_EVENT =
'onautofill' in HTMLInputElement.prototype ||
typeof AutofillEvent === 'function';
/* Universal autofill detection */
function onAutofill(input, callback) {
if (HAS_AUTOFILL_EVENT) {
// Chrome 147+ with origin trial — clean signal
input.addEventListener('autofill', (e) => callback(input, e));
return;
}
// Fallback 1: animationstart on :autofill pseudo-class
// Add this to your CSS: input:-webkit-autofill { animation-name: autofill-detect; }
// @keyframes autofill-detect {}
input.addEventListener('animationstart', (e) => {
if (e.animationName === 'autofill-detect') callback(input, e);
});
// Fallback 2: input event heuristic (less reliable)
input.addEventListener('input', (e) => {
if (e instanceof InputEvent && e.inputType === '' && e.data === null) {
callback(input, e);
}
});
}
/* Example usage */
document.querySelectorAll('form input').forEach(input => {
onAutofill(input, (el, evt) => {
console.log('Autofilled:', el.name, '=', el.value);
el.closest('.field')?.classList.add('autofilled');
});
});
see also
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗