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 April 2017.
Das compositionstart
-Ereignis wird ausgelöst, wenn ein Textzusammensetzungssystem wie ein Eingabemethoden-Editor eine neue Zusammensetzungssitzung startet.
Beispielsweise könnte dieses Ereignis ausgelöst werden, nachdem ein Benutzer anfängt, ein chinesisches Zeichen 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
.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern, UIEvent
, und ihres Vorfahren — Event
.
CompositionEvent.data
Nur lesbar-
Gibt die vom Eingabemethoden-Editor erzeugten Zeichen zurück, die das Ereignis ausgelöst haben; sie variieren je nach Art des Ereignisses, das das
CompositionEvent
-Objekt erzeugt hat. CompositionEvent.locale
Nur lesbar Veraltet-
Gibt die Gebietsschema des aktuellen Eingabemethoden-Editors zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Zusammensetzung mit 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
BCD tables only load in the browser
Siehe auch
- Verwandte Ereignisse:
compositionend
,compositionupdate
.