demo · v147 · autofill event

FormData Autofill Tester

Simulate per-field autofill, programmatic input events, and batch autofill. The event log distinguishes real autofill events from ordinary input events — no false positives.

Use the Simulate Autofill buttons to dispatch synthetic autofill events on individual fields. Use Simulate input to fire a plain input event. Watch the event log — the type and flag differ. Trigger real browser autofill (right-click a field → Autofill) to see the genuine signal.

Form fields

Per-field simulation

Each button fires either a synthetic autofill event or a plain input event.

autofill events 0
input events 0
batch ops 0
autofill event
input event (programmatic)
batch operation
system

how it works

// Listen for autofill — only fires when browser fills the field
input.addEventListener('autofill', (e) => {
  console.log('autofill event', input.name, input.value);
  // e.type === 'autofill', NOT 'input'
  // Real event: e.isTrusted === true
  // Synthetic simulation: e.isTrusted === false
});

// Programmatic input event — also fires from scripts
input.addEventListener('input', (e) => {
  if (e.isTrusted && e.inputType === '') {
    // Old heuristic: maybe autofill? Not reliable.
  }
});

// Dispatch synthetic autofill for testing
const evt = new Event('autofill', { bubbles: true });
input.dispatchEvent(evt);  // isTrusted === false (synthetic)

key differences

Property autofill event input event
e.type "autofill" "input"
triggered by Browser autofill only User typing, scripts, autofill
false positives None (explicit signal) Many — must heuristically filter
fires on paste No Yes

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗