Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Element: compositionstart 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 compositionstart-Ereignis wird ausgelöst, wenn ein Textkompositionssystem wie ein Eingabemethoden-Editor eine neue Kompositionssitzung beginnt.
Beispielsweise könnte dieses Ereignis ausgelöst werden, nachdem ein Benutzer begonnen hat, ein chinesisches Schriftzeichen mit einem Pinyin-Eingabemethoden-Editor einzugeben.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("compositionstart", (event) => { })
oncompositionstart = (event) => { }
Ereignistyp
Ein CompositionEvent. Erbt von UIEvent und Event.
Eigenschaften des Ereignisses
Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Element, UIEvent, und ihrem Vorfahren — Event.
CompositionEvent.dataSchreibgeschützt-
Gibt die Zeichen zurück, die von der Eingabemethode generiert wurden, die das Ereignis ausgelöst hat; es variiert je nach Art des Ereignisses, das das
CompositionEvent-Objekt generierte. CompositionEvent.localeSchreibgeschützt-
Gibt die Gebietsschema der aktuellen Eingabemethode zurück (zum Beispiel das Tastaturlayout-Gebietsschema, wenn die Komposition mit einem IME verbunden ist).
Beispiele
const inputElement = document.querySelector('input[type="text"]');
inputElement.addEventListener("compositionstart", (event) => {
console.log(`generated characters were: ${event.data}`);
});
Live-Beispiel
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>
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-compositionstart |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Siehe auch
- Verwandte Ereignisse:
compositionend,compositionupdate.