JavaScript Element beforeinput Event

What You’ll Learn

The beforeinput event fires when an <input> or <textarea> value is about to change. Learn addEventListener vs onbeforeinput, InputEvent fields (data, inputType), when preventDefault() works, and how it differs from input—with five examples and try-it labs.

Introduction

When a user types, deletes, or pastes into a text field, the browser is about to update the DOM value. beforeinput gives you a chance to inspect—and often cancel—that change before it happens.

MDN: the event also applies to contenteditable hosts and designMode. Unlike input, it does not fire on <select>.

Understanding beforeinput

An instance event that signals an upcoming text edit. It answers: “Is the value about to change—and should we allow it?”

• Fires before <input> / <textarea> (and editable hosts) change.
• Does not fire on <select> (unlike input).
• InputEvent — data, inputType, isComposing, dataTransfer.
• Not always cancelable for autofill / spell-check / IME paths.
• Baseline Widely available on MDN (since March 2021).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("beforeinput", (event) => { });

onbeforeinput = (event) => { };

Event type

An InputEvent (inherits from UIEvent).

Event properties

⚖️ beforeinput vs input

⚠️ Not Every Edit Is Cancelable

MDN notes that not every user modification fires beforeinput, and the event may fire but be non-cancelable—for example autocomplete, spell-check corrections, password-manager autofill, or IME updates (details vary by browser and OS).

To override edit behavior in all situations, also handle input and revert unwanted changes that slipped past beforeinput.

Examples Gallery

Examples follow MDN Element: beforeinput event. Type in the Try It Yourself labs to see the event fire before the field updates.

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

input.addEventListener("beforeinput", (e) => {
  // Value has not changed yet — this is the "before" snapshot
  log.textContent = e.target.value;
});

(empty, then "H" as you type the second letter)

const input = document.querySelector("input");

input.onbeforeinput = (e) => {
  console.log("about to change from:", e.target.value);
  console.log("incoming data:", e.data);
};

// Assigning again replaces the previous onbeforeinput handler.

about to change from: 
incoming data: A

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

field.addEventListener("beforeinput", (event) => {
  console.log("inputType:", event.inputType);
  console.log("data:", JSON.stringify(event.data));
  console.log("isComposing:", event.isComposing);
});

inputType: insertText
data: "a"
isComposing: false

const field = document.getElementById("name");

field.addEventListener("beforeinput", (event) => {
  if (event.data && /\d/.test(event.data)) {
    event.preventDefault();
    console.log("Blocked digit:", event.data);
  }
});

// Letters/spaces insert normally; digits are rejected (when cancelable).

Blocked digit: 5

function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

console.log("beforeinput available:", isBeforeInputEventAvailable());

if (isBeforeInputEventAvailable()) {
  document.querySelector("input").addEventListener("beforeinput", () => {
    console.log("beforeinput path ready");
  });
} else {
  console.log("Fall back to input + manual validation");
}

beforeinput available: true

🚀 Common Use Cases

• Blocking invalid characters before they appear in the field.
• Building richer editors on contenteditable with early edit control.
• Inspecting inputType to treat insert vs delete differently.
• Improving performance by deciding early whether an edit should apply.
• Pairing with input for a complete “before and after” story.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since March 2021).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Does not fire on <select>; use input / change there.
• Autofill / spell-check / IME paths may not be fully cancelable via beforeinput.
• Related learning: beforematch, addEventListener(), JavaScript hub.

💡 Best Practices