EditContext: compositionstart-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das compositionstart-Ereignis der EditContext-Schnittstelle wird ausgelöst, wenn die Texteingabe über ein Fenster eines Input Method Editor (IME) beginnt.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("compositionstart", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
oncompositionstart = (event) => { }
Beispiele
Mit compositionstart den Rahmen des bearbeitbaren Bereichs ändern
Im folgenden Beispiel wird der Rahmen des bearbeitbaren Bereichs rot, wenn das compositionstart-Ereignis ausgelöst wird, und wieder schwarz, wenn das compositionend-Ereignis ausgelöst wird. Beachten Sie, dass die Event-Listener-Callbacks in diesem Beispiel nur aufgerufen werden, wenn Text über ein IME-Fenster oder eine andere plattformspezifische Bearbeitungsoberfläche eingegeben wird.
#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
| Spezifikation |
|---|
| EditContext API # dom-editcontext-oncompositionstart |