Element: compositionupdate-Event

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das compositionupdate-Event wird ausgelöst, wenn ein neues Zeichen im Kontext einer Texteingabesitzung empfangen wird, die von einem Textzusammensetzungssystem wie einem Eingabemethoden-Editor kontrolliert wird.

Dieses Event könnte beispielsweise 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 Ereignis-Handler-Eigenschaft.

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

oncompositionupdate = (event) => { }

Ereignistyp

Ein CompositionEvent, das von UIEvent und Event erbt.

Ereigniseigenschaften

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

CompositionEvent.data Schreibgeschützt: Gibt die Zeichen zurück, die durch die Eingabemethode generiert wurden, welche das Ereignis ausgelöst hat; dies variiert je nach Art des Ereignisses, das das CompositionEvent-Objekt erzeugt hat.
CompositionEvent.locale Schreibgeschützt: Gibt das Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Komposition 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">
  <p>First select textbox, then to open IME:</p>
  <ul>
    <li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li>
    <li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li>
  </ul>
  <label for="example">Example input</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

Spezifikation
UI Events # event-type-compositionupdate

Browser-Kompatibilität

Siehe auch

Verwandte Ereignisse: compositionstart, compositionend.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden