Element: compositionstart event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das compositionstart-Ereignis wird ausgelöst, wenn ein Textkompositionssystem wie ein Eingabemethoden-Editor eine neue Kompositionssitzung beginnt.
Beispielsweise könnte dieses Ereignis ausgelöst werden, nachdem ein Benutzer begonnen hat, ein chinesisches Schriftzeichen mit einem Pinyin-Eingabemethoden-Editor einzugeben.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("compositionstart", (event) => { }) oncompositionstart = (event) => { } Ereignistyp
Ein CompositionEvent. Erbt von UIEvent und Event.
Eigenschaften des Ereignisses
Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Element, UIEvent, und ihrem Vorfahren — Event.
CompositionEvent.dataSchreibgeschützt-
Gibt die Zeichen zurück, die von der Eingabemethode generiert wurden, die das Ereignis ausgelöst hat; es variiert je nach Art des Ereignisses, das das
CompositionEvent-Objekt generierte. CompositionEvent.localeSchreibgeschützt Veraltet-
Gibt die Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Komposition mit einem IME verbunden ist).
Beispiele
const inputElement = document.querySelector('input[type="text"]'); inputElement.addEventListener("compositionstart", (event) => { console.log(`generated characters were: ${event.data}`); }); Live-Beispiel
HTML
<div class="control"> <label for="example"> Focus the text-input control, then open your IME and begin typing. </label> <input type="text" id="example" name="example" /> </div> <div class="event-log"> <label for="eventLog">Event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25" id="eventLog"></textarea> <button class="clear-log">Clear</button> </div> JavaScript
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 += `${event.type}: ${event.data}\n`; } inputElement.addEventListener("compositionstart", handleEvent); inputElement.addEventListener("compositionupdate", handleEvent); inputElement.addEventListener("compositionend", handleEvent); Ergebnis
Spezifikationen
| Specification |
|---|
| UI Events # event-type-compositionstart |
Browser-Kompatibilität
Loading…
Siehe auch
- Verwandte Ereignisse:
compositionend,compositionupdate.