EditContext: compositionstart 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, bevor Sie diese produktiv verwenden.
Das compositionstart
-Ereignis des EditContext
-Interfaces wird ausgelöst, wenn die Komposition mit einem Input Method Editor (IME)-Fenster beginnt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("compositionstart", (event) => {});
oncompositionstart = (event) => {};
Beispiele
Verwendung von compositionstart
, 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 zurück auf Schwarz, wenn das compositionend
-Ereignis ausgelöst wird. Beachten Sie, dass die Rückrufe der Ereignis-Listener in diesem Beispiel nur aufgerufen werden, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen zur Textzusammensetzung verwendet werden.
#text-editor {
border: 1px solid black;
}
#text-editor.is-composing {
border-color: red;
}
<div id="text-editor"></div>
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-oncompositionstart |
Browser-Kompatibilität
BCD tables only load in the browser