JavaScript Element beforeinput Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word BEFOREINPUT

Definition

In JavaScript, the beforeinput event fires when the value of an <input> or <textarea> is about to be modified (MDN). Unlike input, it does not fire on <select>. It also applies to contenteditable and designMode.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for beforeinput. Start with this line.

JavaScript
el.addEventListener("beforeinput", fn)
CallWhat it does
el.addEventListener("beforeinput", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("beforeinput", …) — no import required.

Library declarations
JavaScript
el.addEventListener("beforeinput", fn)

Parameters

ParameterDescription
Editable targetRequired. input / textarea / editing host
preventDefault()Optional. Block cancelable edits only

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log Value Before Edit (MDN)

Show the current value immediately before the browser applies the change.

JavaScript
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
Try It Yourself

How It Works

  1. Listen on the input. Fires before each edit is applied (MDN).
  2. Read e.target.value. Still the old value at this moment.
  3. Write it to the log. Useful for debugging or preview UIs.
  4. Then the browser updates the field (unless you cancel).

Example 2 — Read data and inputType

See what text is arriving and what kind of edit it is.

JavaScript
const field = document.getElementById("field");
const out = document.getElementById("out");

field.addEventListener("beforeinput", (event) => {
  out.textContent =
    "data: " + JSON.stringify(event.data) +
    "\ninputType: " + event.inputType;
});
Try It Yourself

How It Works

  1. Receive an InputEvent. Carries edit details.
  2. Read data. Inserted characters (empty for many deletes).
  3. Read inputType. Kind of change (insert, delete, format, …).
  4. Branch on inputType when paste/delete need different rules.

Example 3 — Block Non-Digits

Cancel ordinary letter inserts when you only want digits.

JavaScript
const field = document.getElementById("field");
const out = document.getElementById("out");

field.addEventListener("beforeinput", (event) => {
  if (event.inputType === "insertText" && event.data && /\D/.test(event.data)) {
    event.preventDefault();
    out.textContent = "blocked: " + JSON.stringify(event.data);
  }
});
Try It Yourself

How It Works

  1. Check inputType. Focus on insertText for typing.
  2. Test data. Reject characters that are not digits.
  3. Call preventDefault() when the event is cancelable.
  4. Remember MDN’s warning: autofill / IME may still change the value — pair with input if needed.
Compatibility

Browser Support

Element.beforeinput is marked Baseline Widely available on MDN (since March 2021). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element beforeinput

Fires before an editable value changes — InputEvent with data and inputType.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Not supported
Not supported
beforeinput Baseline support

Bottom line: Safe for modern browsers. Use beforeinput to inspect or cancel cancelable edits, and pair with input for complete coverage. See the MDN Element beforeinput reference.

Frequently Asked Questions

It fires when the value of an input or textarea is about to be modified (MDN). Unlike the input event, it does not fire on select. It also applies to contenteditable elements and when document.designMode is on.
No. MDN marks Element beforeinput as Baseline Widely available (since March 2021). It is not Deprecated, Experimental, or Non-standard.
An InputEvent (inherits from UIEvent). Useful properties include data, dataTransfer, inputType, and isComposing.
Often yes for ordinary typing, which lets you override edit behavior before the DOM changes. But not every modification is cancelable — autocomplete, spell-check corrections, password autofill, and some IME updates may fire a non-cancelable event or skip beforeinput (MDN). Also handle input and revert unwanted changes when needed.
beforeinput fires before the value changes (when cancelable). input fires after the value has already changed. beforeinput does not fire on <select>; input can.
A common check is: window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function". That signals modern beforeinput / getTargetRanges support (MDN).

Next: Element beforematch

Learn the event fired before an element is revealed by find-in-page.

beforematch tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element auxclick Event JavaScript Element beforematch Event