Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Element: compositionend-Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Dascompositionend-Ereignis wird ausgelöst, wenn ein Textzusammensetzungssystem wie einInput Method Editor die aktuelle Kompositionssitzung abschließt oder abbricht.
Zum Beispiel könnte dieses Ereignis ausgelöst werden, nachdem ein Benutzer die Eingabe eines chinesischen Zeichens mit einemPinyinInput Method Editor beendet hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("compositionend", (event) => { })oncompositionend = (event) => { }Ereignistyp
EinCompositionEvent. Erbt vonUIEvent undEvent.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil,UIEvent, und ihrem Vorfahren —Event.
CompositionEvent.dataSchreibgeschütztGibt die Zeichen zurück, die von der Eingabemethode erzeugt wurden, die das Ereignis ausgelöst hat; dies variiert je nach Art des Ereignisses, das das
CompositionEvent-Objekt generiert hat.CompositionEvent.localeSchreibgeschütztVeraltetGibt das Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Komposition mit einemInput Method Editor verbunden ist).
Beispiele
const inputElement = document.querySelector('input[type="text"]');inputElement.addEventListener("compositionend", (event) => { console.log(`generated characters were: ${event.data}`);});Live-Beispiel
HTML
<div> <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" name="example" /></div><div> <label for="eventLog">Event log:</label> <textarea readonly rows="8" cols="25" ></textarea> <button>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
Siehe auch
- Verwandte Ereignisse:
compositionstart,compositionupdate.