Element: compositionend event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

compositionend event is fired when a text composition system such as an 输入法编辑器 completes or cancels the current composition session.

For example, this event could be fired after a user finishes entering a Chinese character using a Pinyin IME.

冒泡	Yes
可取消	Yes
接口	`CompositionEvent`
事件处理程序特性	None

范例

const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener('compositionend', (event) => {
  console.log(`generated characters were: ${event.data}`);
});

实时范例

HTML

<div class="control">
  <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label>
  <input type="text" id="example" name="example">
</div>
<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
  <button class="clear-log">Clear</button>
</div>

CSS

body {
  padding: .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: .5rem 0;
}
kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

JS

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 = log.textContent + `${event.type}: ${event.data}\n`;
}
inputElement.addEventListener('compositionstart', handleEvent);
inputElement.addEventListener('compositionupdate', handleEvent);
inputElement.addEventListener('compositionend', handleEvent);

结果

规范

规范	状态
UI Events	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`compositionend` event	Chrome Yes	Edge 12	Firefox 9	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持
兼容性未知 ?

另请参阅

相关事件： compositionstart , compositionupdate .

元数据

最后修改： Feb 8, 2020

在此页

范例

实时范例

HTML

CSS

JS

结果

规范

浏览器兼容性

图例

另请参阅

相关话题