JavaScript Element compositionend Event

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

Definition

In JavaScript, compositionend fires when a text composition system such as an Input Method Editor (IME) completes or cancels the current composition session (MDN) — for example after finishing a Chinese character with Pinyin.

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

Syntax

Listen for compositionend. Start with this line.

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

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

Library declarations
JavaScript
addEventListener("compositionend", fn)

Parameters

ParameterDescription
Event nameRequired. "compositionend"
Handler propOptional. oncompositionend
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 when composition ends.

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

inputElement.addEventListener("compositionend", (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 end. Exact name: "compositionend".
  3. Read event.data. Characters generated for this end event.
  4. Need a real IME. Plain Latin typing alone usually does not fire this event.

Example 2 — Clear a Composing Flag

Resume “final text” logic when the IME session ends.

JavaScript
let composing = false;
const input = document.querySelector("input");

input.addEventListener("compositionstart", () => {
  composing = true;
  console.log("composing…");
});

input.addEventListener("compositionend", (event) => {
  composing = false;
  console.log("done:", event.data || input.value);
});
Try It Yourself

How It Works

  1. Start → true. On compositionstart, mark composing.
  2. End → false. Clear the flag on compositionend.
  3. Read final text. Prefer event.data and/or input.value.
  4. Then commit. Run live search / validators only after end.

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 tracks candidates. May fire many times.
  4. End closes the session. Final committed text is usually in data / the field value.
Compatibility

Browser Support

Element.compositionend is marked Baseline Widely available on MDN (since July 2015). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element compositionend

Fires when an IME (or similar) completes or cancels a composition session.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Supported (legacy)
Supported
compositionend Baseline support

Bottom line: Safe everywhere modern. Clear composing state on compositionend, then run final UI logic. Avoid CompositionEvent.locale. See the MDN Element compositionend reference.

Frequently Asked Questions

It fires when a text composition system such as an Input Method Editor (IME) completes or cancels the current composition session — for example after finishing a Chinese character with a Pinyin IME (MDN).
No. MDN marks Element compositionend 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.
compositionstart begins a session, compositionupdate fires as the candidate text changes, 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).
Often yes for custom editors. During composition, InputEvent.isComposing may be true. Wait for compositionend before treating text as final committed characters.

Next: Element compositionstart

Learn the event that fires when an IME composition session begins.

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