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 July 2015.

Das compositionupdate-Ereignis wird ausgelöst, wenn ein neues Zeichen im Kontext einer Textzusammensetzungssitzung empfangen wird, die von einem Textzusammensetzungssystem wie einem Input Method Editor gesteuert wird.

Zum Beispiel könnte dieses Ereignis ausgelöst werden, während ein Benutzer ein chinesisches Zeichen mit einem Pinyin Input Method Editor eingibt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder legen Sie eine Ereignishandler-Eigenschaft fest.

addEventListener("compositionupdate", (event) => { })

oncompositionupdate = (event) => { }

Ereignistyp

Ein CompositionEvent. Erbt von UIEvent und Event.

Ereigniseigenschaften

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

CompositionEvent.data Schreibgeschützt: Gibt die vom Eingabemethode-Editor erzeugten Zeichen zurück, die das Ereignis ausgelöst haben; dies variiert je nach Art des Ereignisses, das das CompositionEvent-Objekt erzeugt hat.
CompositionEvent.locale Schreibgeschützt Veraltet: Gibt das Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Gebietsschema des Tastaturlayouts, wenn die Zusammensetzung mit IME verbunden ist).

Beispiele

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

inputElement.addEventListener("compositionupdate", (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-compositionupdate

Browser-Kompatibilität

Siehe auch

Verwandte Ereignisse: compositionstart, compositionend.