Element: compositionend Ereignis

Das compositionend Ereignis wird ausgelöst, wenn ein Textkompositionssystem wie ein Eingabemethoden-Editor die aktuelle Kompositionssitzung abschließt oder abbricht.

Dieses Ereignis könnte zum Beispiel ausgelöst werden, nachdem ein Benutzer die Eingabe eines chinesischen Zeichens mit einem Pinyin IME beendet hat.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("compositionend", (event) => {});

oncompositionend = (event) => {};

Ereignistyp

Ein CompositionEvent. Erbt von UIEvent und Event.

Ereigniseigenschaften

Dieses Interface erbt auch Eigenschaften von seinem Elternteil, UIEvent, und seinem Vorfahren — Event.

CompositionEvent.data Schreibgeschützt: Gibt die Zeichen zurück, die durch die Eingabemethode erzeugt wurden, die das Ereignis ausgelöst hat; dies variiert je nach Art des Ereignisses, das das CompositionEvent Objekt generiert hat.
CompositionEvent.locale Schreibgeschützt Veraltet: Gibt die Gebietsschema der aktuellen Eingabemethode zurück (z.B. das Tastaturlayout-Gebietsschema, wenn die Komposition mit einem IME verbunden ist).

Beispiele

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

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

Live-Beispiel

HTML

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>

body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

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.