EditContext: compositionend-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das compositionend-Ereignis des EditContext-Interfaces wird ausgelöst, wenn die Komposition mit einem Input Method Editor (IME)-Fenster endet.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

oncompositionend = (event) => {};

Beispiele

Verwendung von compositionend, um den Rand des bearbeitbaren Bereichs zu ändern

Im folgenden Beispiel wird der Rand des bearbeitbaren Bereichs auf Rot gesetzt, wenn das compositionstart-Ereignis ausgelöst wird, und wieder auf Schwarz, wenn das compositionend-Ereignis ausgelöst wird. Beachten Sie, dass die Rückruffunktionen des Ereignis-Listeners in diesem Beispiel nur aufgerufen werden, wenn ein IME-Fenster oder andere plattformspezifische UI-Oberflächen zum Bearbeiten von Text verwendet werden.

css
#text-editor {
  border: 1px solid black;
}
#text-editor.is-composing {
  border-color: red;
}
html
<div id="text-editor"></div>
js
const editorElement = document.getElementById("text-editor");
const editContext = new EditContext();
editorElement.editContext = editContext;

editContext.addEventListener("compositionstart", (event) => {
  editorElement.classList.add("is-composing");
});

editContext.addEventListener("compositionend", (event) => {
  editorElement.classList.remove("is-composing");
});

Spezifikationen

Specification
EditContext API
# dom-editcontext-oncompositionend

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
compositionend event
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.