Zdarzenia#
Typ compositionupdate#
| Typ: | compositionupdate |
|---|---|
| Interfejs: | CompositionEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu compositionupdate powinno zostać wysłane przez aplikację kliencką w trakcie sesji kompozycji, kiedy system kompozycji tekstu aktualizuje aktywny fragment tekstu nowymi znakami, co znajduje odzwierciedlenie w postaci łańcucha znakowego przechowywanego we właściwości CompositionEvent.data.
W systemach kompozycji tekstu, które wprowadzają kompozycję w synchronizacji z kontrolą wejścia, zdarzenie typu compositionupdate musi zostać wysłane przed uaktualnieniem kontroli.
Niektóre systemy kompozycji tekstu mogą nie eksponować takich informacji do DOM, i w takiej sytuacji zdarzenie typu compositionupdate nie zostanie odpalone podczas procesu kompozycji.
Jeśli sesja kompozycji zostanie odwołana to zdarzenie typu compositionupdate będzie odpalane natychmiast przed zdarzeniem compositionend, i właściwość CompositionEvent.data ustawiona zostanie na pusty łańcuch znakowy.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input {vertical-align: top;}
input:hover, #box:hover {outline: 3px solid green;}
#box {width: 200px; height: 100px; display: inline-block; background-color: #a08080;}
</style>
</head>
<body>
<p>Edytuj zawartość poniższych elementów przy użyciu IME by odczytać poszczególne cechy zdarzenia.</p>
<div id="box" contenteditable="true">Edytowalny kontener</div>
<input size="40" type="text" value="Jakiś początkowy tekst">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var box = document.getElementById("box");
var input = document.getElementsByTagName("input")[0];
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.view: " + e.view
+ "<br>" + "e.detail: " + e.detail
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.data: " + e.data
+ "<br>" + "e.locale: " + e.locale
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
box.addEventListener("compositionstart", readInfo, false);
box.addEventListener("compositionupdate", readInfo, false);
box.addEventListener("compositionend", readInfo, false);
input.addEventListener("compositionstart", readInfo, false);
input.addEventListener("compositionupdate", readInfo, false);
input.addEventListener("compositionend", readInfo, false);
</script>
</body>
</html>