Element: compositionupdate 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 compositionupdate
Ereignis wird ausgelöst, wenn im Kontext einer Textzusammensetzungssitzung, die von einem Textzusammensetzungssystem wie einem Eingabemethoden-Editor gesteuert wird, ein neues Zeichen empfangen wird.
Zum Beispiel könnte dieses Ereignis ausgelöst werden, während ein Benutzer ein chinesisches Zeichen mit einem Pinyin Eingabemethoden-Editor eingibt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("compositionupdate", (event) => {});
oncompositionupdate = (event) => {};
Ereignistyp
Ein CompositionEvent
. Erbt von UIEvent
und Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, UIEvent
, und ihrem Vorfahren — Event
.
CompositionEvent.data
Schreibgeschützt-
Gibt die vom Eingabemethoden-Editor generierten Zeichen zurück, die das Ereignis ausgelöst haben; sie variieren je nach Art des Ereignisses, das das
CompositionEvent
-Objekt erstellt hat. CompositionEvent.locale
Schreibgeschützt Veraltet-
Gibt das Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Zusammensetzung mit IME verknüpft ist).
Beispiele
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener("compositionupdate", (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-compositionupdate |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Verwandte Ereignisse:
compositionstart
,compositionend
.