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.

js
addEventListener("compositionstart", (event) => {});

oncompositionstart = (event) => {};

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern, UIEvent, und ihres Vorfahren — Event.

CompositionEvent.data Schreibgeschützt

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 Schreibgeschützt Veraltet

Gibt die Gebietsschema des aktuellen Eingabemethoden-Editors zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Zusammensetzung mit IME verbunden ist).

Beispiele

js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

Live-Beispiel

HTML

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

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
compositionstart event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch