JavaScript Element input Event

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

Definition

In JavaScript, the input event fires when the value of an <input>, <textarea>, or <select> changes as a direct result of a user action (MDN). 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 input. Start with this line.

JavaScript
element.addEventListener("input", (event) => { … })
CallWhat it does
element.addEventListener("input", (event) => { … })Primary signature.

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

Library declarations
JavaScript
element.addEventListener("input", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "input"
Handler propOptional. oninput
User actionRequired. Script value = does not fire it

Return Value

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

JavaScript Examples

Example 1 — Log the Value (MDN)

Update a live readout whenever the user edits the field.

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

input.addEventListener("input", updateValue);

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

How It Works

  1. Listen for input. Fires as the user edits.
  2. Read the target. e.target.value is the current string.
  3. Update UI. Perfect for live counters, filters, and previews.
  4. User-driven only. Script assignments will not call this handler.

Example 2 — input vs change

See live edits versus a committed value on blur.

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

field.addEventListener("input", () => {
  console.log("input:", field.value);
});

field.addEventListener("change", () => {
  console.log("change:", field.value);
});
Try It Yourself

How It Works

  1. input is eager. Fires for each value change while typing.
  2. change is committed. Often waits for blur on text fields.
  3. Choose by UX. Live search → input; submit-ready value → change.
  4. Both can help. Preview live, validate finally on change.

Example 3 — Read InputEvent Fields

On text controls, inspect inputType and data when available.

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

field.addEventListener("input", (event) => {
  console.log(event.target.value);
  console.log(event.inputType); // e.g. "insertText"
  console.log(event.data);      // inserted text, or null
});
Try It Yourself

How It Works

  1. Text controls. MDN: interface is InputEvent.
  2. inputType. Describes the edit (insert, delete, …).
  3. data. Characters inserted, or null for some edits.
  4. Other controls. Checkbox/select may give a plain Event — guard optional fields.
Compatibility

Browser Support

Element input is Baseline Widely available (MDN: since January 2020). Safe for live form UIs in modern evergreen browsers.

✓ Baseline · Widely available

Element input

User-driven value-change event for form controls and editable hosts.

99% Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
input Baseline

Bottom line: Default choice for live typing UI. Use change for committed values, and beforeinput when you need to cancel an edit.

Frequently Asked Questions

It fires when the value of an input, textarea, or select changes as a direct result of a user action (MDN). It also applies to contenteditable hosts and documents with designMode on.
No. MDN marks Element input as Baseline Widely available (since January 2020). It is not Deprecated, Experimental, or Non-standard.
For text-accepting input and textarea controls, the interface is InputEvent. For other controls, it may be a plain Event (MDN).
input fires as the value changes (for example each keystroke). change fires when the value is committed — such as when a text control loses focus or a selection is finalized.
beforeinput fires before the DOM value changes (often cancelable). input fires after the value has already changed.
No. Setting element.value in script does not fire input. Only user-driven changes (and some browser UI actions like autofill) are expected to (MDN).

Next: keydown

Learn the Element event for key presses.

keydown 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 gotpointercapture Event JavaScript Element keydown Event