Element: compositionend Ereignis
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 compositionend
Ereignis wird ausgelöst, wenn ein Textzusammensetzungssystem, wie ein Input-Method-Editor, die aktuelle Eingabesitzung abschließt oder abbricht.
Zum Beispiel könnte dieses Ereignis ausgelöst werden, nachdem ein Benutzer das Eingeben eines chinesischen Zeichens mit einem Pinyin Input-Method-Editor beendet hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("compositionend", (event) => {});
oncompositionend = (event) => {};
Ereignistyp
Ein CompositionEvent
. Erbt von UIEvent
und Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften ihres Elternteils, UIEvent
, und ihres Vorfahren — Event
.
CompositionEvent.data
Nur lesbar-
Gibt die Zeichen zurück, die durch die Eingabemethode erzeugt wurden, die das Ereignis ausgelöst hat; diese variieren je nach Typ des Ereignisses, das das
CompositionEvent
Objekt generiert hat. CompositionEvent.locale
Nur lesbar Veraltet-
Gibt das Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Gebietsschema des Tastaturlayouts, wenn die Eingabe mit einem Input-Method-Editor verbunden ist).
Beispiele
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener("compositionend", (event) => {
console.log(`generated characters were: ${event.data}`);
});
Live-Beispiel
HTML
<div class="control">
<label for="example">
First select textbox, then to open IME:
<ul>
<li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li>
<li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li>
</ul>
</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-compositionend |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Verwandte Ereignisse:
compositionstart
,compositionupdate
.