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

BCD tables only load in the browser