JavaScript Element compositionstart Event

What You’ll Learn

The compositionstart event fires when an IME (Input Method Editor) or other text composition system starts a new composition session. Learn addEventListener vs oncompositionstart, 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. compositionstart 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 compositionstart

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("compositionstart", (event) => { });

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

generated characters were: 

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

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

// Assigning again replaces the previous oncompositionstart handler.

composition started: 

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");
let composing = false;

field.addEventListener("compositionstart", () => {
  composing = true;
  status.textContent = "Composing…";
});

field.addEventListener("compositionend", () => {
  composing = false;
  status.textContent = "Ready (value: " + field.value + ")";
});

Composing…

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

field.addEventListener("compositionstart", () => {
  composing = true;
  out.textContent = "(composing… search paused)";
});

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

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

(composing… search paused)
Search for: 你

🚀 Common Use Cases

• Showing a “composing…” status when an IME session begins.
• Pausing live search or autosave until composition ends.
• Building custom editors that respect IME session boundaries.
• Logging IME session starts for internationalization debugging.
• Pairing with compositionupdate / 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: compositionupdate, compositionend.
• Latin-only typing may never fire composition events—test with a real IME.
• Related learning: compositionupdate, compositionend, beforeinput, addEventListener(), JavaScript hub.

💡 Best Practices