JavaScript Element compositionstart Event

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

Definition

In JavaScript, compositionstart fires when a text composition system such as an Input Method Editor (IME) starts a new composition session (MDN) — for example when a user begins entering a Chinese character with Pinyin.

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

Syntax

Listen for compositionstart. Start with this line.

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

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

Library declarations
JavaScript
addEventListener("compositionstart", fn)

Parameters

ParameterDescription
Event nameRequired. "compositionstart"
Handler propOptional. oncompositionstart
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 starts.

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

inputElement.addEventListener("compositionstart", (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 start. Exact name: "compositionstart".
  3. Read event.data. Characters for this composition event (often empty at start).
  4. Need a real IME. Plain Latin typing alone usually does not fire this event.

Example 2 — Set a Composing Flag

Pause “final text” logic until the IME session ends.

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

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

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

How It Works

  1. Start → true. On compositionstart, mark composing.
  2. End → false. Clear the flag on compositionend.
  3. Guard heavy work. Skip live search / auto-submit while composing.
  4. Then commit. After end, read the final input.value.

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 compositionstart is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

compositionstart

Fires when an IME (or similar) starts a new text composition 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
compositionstart Excellent

Bottom line: Use compositionstart to mark composing state; pair with compositionupdate / compositionend. Avoid CompositionEvent.locale.

Frequently Asked Questions

It fires when a text composition system such as an Input Method Editor (IME) starts a new composition session — for example when a user begins entering a Chinese character with a Pinyin IME (MDN).
No. MDN marks Element compositionstart 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).
Mark your UI as composing: pause live search, avoid treating partial IME text as final, and wait for compositionend (or input with isComposing false) before committing logic.

Next: compositionupdate

Learn the event fired as IME candidate text changes.

compositionupdate 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 compositionend Event JavaScript Element compositionupdate Event