Element：compositionend 事件

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

compositionend 事件在文字合成系統（例如輸入法編輯器）完成或取消當前合成會話時觸發。

例如，當用戶使用拼音輸入法編輯器輸入完一個漢字後，就可能觸發此事件。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

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

oncompositionend = (event) => { }

事件型別

一個 CompositionEvent 物件。繼承自 UIEvent 和 Event。

事件屬性

此介面還繼承了其父介面 UIEvent 及其祖先介面 Event 的屬性。

CompositionEvent.data 只讀: 返回由觸發事件的輸入法生成的字元；具體返回值取決於生成 CompositionEvent 物件的事件型別。
CompositionEvent.locale 只讀已棄用: 返回當前輸入法的 locale（例如，如果合成與輸入法編輯器相關聯，則返回鍵盤佈局的 locale）。

示例

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

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

即時示例

HTML

html

<div class="control">
  <label for="example">
    First select textbox, then to open IME:
    <ul>
      <li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li>
      <li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li>
    </ul>
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="25"
    id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>

body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

JavaScript

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

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

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

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

結果

規範

規範
UI 事件 # event-type-compositionend

瀏覽器相容性

另見

相關事件：compositionstart, compositionupdate。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年9月25日，由 MDN 貢獻者編輯。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤