v149 · HTML · Input · Android

BeforeInput Monitor

Watch the beforeinput and input event stream as media is inserted into a contenteditable area. On Android with a GIF/sticker keyboard, these events carry a dataTransfer with the media files. Desktop: use the simulated insertion buttons to see the same flow.

Accept media types (contenteditable accepts)
GIF / animated stickers
PNG images
WebP
Simulate IME insertion:
Synthetic buttons dispatch a cancelable beforeinput with file items and optional text/plain fallback, then manually render only if the event was not prevented.
Type here or use the buttons above to simulate Android IME media insertion.
Non-editable target: click "Probe" to see a beforeinput event without media dataTransfer.
Ready — on Android with touch keyboard, insert a GIF or sticker to see real events
beforeinput events
— waiting for events —
input events (after insertion)
— waiting for events —

opt-in markup

<!-- Opt in to media insertion from Android IME -->
<div contenteditable="true"
     inputmode="text"
     enterkeyhint="send">
  Type your message…
</div>

<script>
editor.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertFromPaste' ||
      e.inputType === 'insertReplacementText') {
    const files = e.dataTransfer?.files;
    if (files?.length) {
      e.preventDefault(); // intercept before DOM insertion
      handleMediaFiles(files);
    }
  }
});
</script>

see also

implementation reference

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