JavaScript Element compositionend Event

What You’ll Learn

The compositionend event fires when an IME (Input Method Editor) or other text composition system completes or cancels a composition session. Learn addEventListener vs oncompositionend, CompositionEvent.data, how it pairs with compositionstart / compositionupdate, 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. compositionend means the session finished—either the text was committed or the composition was canceled. MDN’s classic example is finishing a Chinese character with a Pinyin IME.

Understanding compositionend

An instance event that answers: “Did the IME composition session just finish or get canceled?”

• Fires when composition completes or is canceled.
• CompositionEvent — read data (and sometimes locale).
• Siblings — compositionstart, compositionupdate.
• Useful for custom editors, search-as-you-type, and validation after IME commit.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

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

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

oncompositionend = (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: compositionend 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("compositionend", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

generated characters were: 你

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

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

// Assigning again replaces the previous oncompositionend handler.

composition ended: …

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("compositionend", (event) => {
  if (event.data) {
    status.textContent = "Committed: " + event.data;
  } else {
    status.textContent = "Composition canceled or empty";
  }
});

Committed: 你

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

field.addEventListener("input", (event) => {
  if (event.isComposing) {
    out.textContent = "(composing… skip search)";
    return;
  }
  out.textContent = "Search for: " + field.value;
});

field.addEventListener("compositionend", () => {
  out.textContent = "Search for: " + field.value;
});

(composing… skip search)
Search for: 你

🚀 Common Use Cases

• Running search or validation only after IME commit.
• Building custom rich-text / contenteditable editors that respect composition.
• Logging IME sessions for debugging international input.
• Syncing UI hints (“composing…”) until composition ends.
• Pairing with beforeinput / input for complete edit stories.

🔧 How It Works

📝 Notes

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

💡 Best Practices