JavaScript Element compositionupdate Event

What You’ll Learn

The compositionupdate event fires when an IME (Input Method Editor) or other text composition system starts a new composition session. Learn addEventListener vs oncompositionupdate, CompositionEvent.data, how it pairs with compositionupdate / compositionend, and five try-it labs.

Introduction

Languages such as Chinese, Japanese, and Korean often use an IME. The user types phonetic or stroke hints; the system shows candidates; then a final character (or string) is committed into the field.

That whole flow is a composition session. compositionupdate means the session just began—before candidates settle and before the final character is committed. MDN’s classic example is starting a Chinese character with a Pinyin IME.

Understanding compositionupdate

An instance event that answers: “Did an IME composition session just begin?”

• Fires when a new composition session starts.
• CompositionEvent — read data (and sometimes locale).
• Siblings — compositionupdate, compositionend.
• Useful for pausing search, showing “composing…” UI, custom editors.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

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

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

oncompositionupdate = (event) => { };

Event type

A CompositionEvent (inherits from UIEvent and Event).

Event properties

🔁 Composition Session Flow

1. compositionstart — the IME session begins.
2. compositionupdate — candidate / composing text changes (may fire many times).
3. compositionend — session completes or is canceled; check event.data.

Ordinary Latin typing may never fire these events. They matter most when an IME is active.

⚖️ Composition vs input / beforeinput

Examples Gallery

Examples follow MDN Element: compositionupdate event. To see live IME events, enable an IME (for example macOS Option+`, Windows Win+., or a CJK keyboard).

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

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

generated characters were: ni
generated characters were: ni3

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

field.oncompositionupdate = (event) => {
  console.log("composition update:", event.data);
};

// Assigning again replaces the previous oncompositionupdate handler.

composition update: ni3

const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);

compositionstart: 
compositionupdate: ni
compositionupdate: ni3
compositionend: 你

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

field.addEventListener("compositionupdate", (event) => {
  status.textContent = "Preview: " + event.data;
});

field.addEventListener("compositionend", (event) => {
  status.textContent = "Committed: " + (event.data || field.value);
});

Preview: ni3
Committed: 你

const field = document.getElementById("q");
const out = document.getElementById("out");
let updates = 0;

field.addEventListener("compositionstart", () => {
  updates = 0;
  out.textContent = "Session started (0 updates)";
});

field.addEventListener("compositionupdate", (event) => {
  updates += 1;
  out.textContent = updates + " update(s) — last data: " + event.data;
});

field.addEventListener("compositionend", () => {
  out.textContent = "Session ended after " + updates + " update(s). Value: " + field.value;
});

2 update(s) — last data: ni3
Session ended after 2 update(s). Value: 你

🚀 Common Use Cases

• Showing a live preview of composing / candidate text via event.data.
• Powering custom rich-text or chat editors that draw IME underlines themselves.
• Debugging internationalization by logging every mid-session change.
• Avoiding expensive work on every update (debounce until compositionend).
• Pairing with compositionstart / compositionend for the full story.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Related events: compositionstart, compositionend.
• Latin-only typing may never fire composition events—test with a real IME.
• Related learning: compositionstart, compositionend, contentvisibilityautostatechange, addEventListener(), JavaScript hub.

💡 Best Practices