JavaScript Element compositionupdate Event

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

Definition

In JavaScript, compositionupdate fires when a new character is received during a text composition session controlled by an IME (or similar) — for example while a user enters a Chinese character with Pinyin and the candidate text changes (MDN).

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

Syntax

Listen for compositionupdate. Start with this line.

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

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

Library declarations
JavaScript
addEventListener("compositionupdate", fn)

Parameters

ParameterDescription
Event nameRequired. "compositionupdate"
Handler propOptional. oncompositionupdate
event.localeOptional. Deprecated · Non-standard — avoid

Return Value

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

JavaScript Examples

Example 1 — Listen and Log data (MDN)

Log the characters generated on each composition update.

JavaScript
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionupdate", (event) => {
  console.log(`generated characters were: ${event.data}`);
});
Try It Yourself

How It Works

  1. Find the control. Query the text input.
  2. Listen for updates. Exact name: "compositionupdate".
  3. Read event.data. Current candidate / composing characters.
  4. Expect many fires. One session can emit several updates.

Example 2 — Light Preview Only

Show composing text in the UI without running final search/save logic.

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

input.addEventListener("compositionupdate", (event) => {
  preview.textContent = "composing: " + event.data;
});

input.addEventListener("compositionend", () => {
  preview.textContent = "final: " + input.value;
});
Try It Yourself

How It Works

  1. Update → preview. Write event.data into a light UI label.
  2. Keep it cheap. No network or heavy validation here.
  3. End → final. On compositionend, read the committed value.
  4. Separate concerns. Preview mid-session; commit after the session.

Example 3 — Log the Full Composition Flow

See start, update, and end together (MDN-style event log).

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

function handleEvent(event) {
  console.log(`${event.type}: ${event.data}`);
}

input.addEventListener("compositionstart", handleEvent);
input.addEventListener("compositionupdate", handleEvent);
input.addEventListener("compositionend", handleEvent);
Try It Yourself

How It Works

  1. One handler. Log type and data for each event.
  2. Start opens the session. Often with empty or early data.
  3. Update is the middle. Watch candidates change — this page’s focus.
  4. End closes the session. Final commit point for app logic.
Compatibility

Browser Support

Element compositionupdate is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

compositionupdate

Fires as IME candidate / composing text changes during a session.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
compositionupdate Excellent

Bottom line: Use compositionupdate for light previews only. Pair with compositionstart / compositionend. Avoid CompositionEvent.locale.

Frequently Asked Questions

It fires when a new character is received during a text composition session controlled by an IME or similar system — for example while a user enters a Chinese character with a Pinyin IME and the candidate text changes (MDN).
No. MDN marks Element compositionupdate as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. (CompositionEvent.locale is separately Deprecated and Non-standard — avoid it.)
A CompositionEvent (inherits from UIEvent). The useful property for most apps is data — the characters generated for this event (often the current candidate string).
compositionstart begins a session, compositionupdate fires as the candidate text changes (often many times), and compositionend fires when the session completes or is canceled.
Switch to a CJK (or other IME) keyboard layout. Shortcuts vary by OS (for example Win + . on Windows for emoji/IME UI, or Option + ` on some macOS setups).
Use event.data for a light preview of composing text if needed, but do not treat it as final. Keep search, autosave, and submit helpers paused until compositionend.

Next: contentvisibilityautostatechange

Learn the Element event for content-visibility auto state changes.

contentvisibilityautostatechange 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 compositionstart Event JavaScript Element contentvisibilityautostatechange Event