Zdarzenia#
Typ compositionstart#
Typ: | compositionstart |
---|---|
Interfejs: | CompositionEvent |
Sync / Async: | Sync |
Bąbelkowanie | Tak |
Zaufane cele | Element |
Anulowanie | Tak |
Domyślna akcja | Rozpoczęcie sesji kompozycji, kiedy system kompozycji tekstu jest włączony. |
Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu compositionstart
musi zostać wysłane przez aplikację kliencką w chwili, kiedy system kompozycji tekstu jest włączony i nowa sesja kompozycji ma się rozpocząć (lub się rozpoczęła zależnie od systemu kompozycji tekstu) w kontekście przygotowania kompozycji przejściowego tekstu. Zdarzenie to jest zależne od urządzenia i może polegać na możliwościach systemu kompozycji tekstu oraz sposobu jego mapowania w systemie operacyjnym. Kiedy klawiatura jest używana do obsługi edytora metody wejściowej to zdarzenie compositionstart
jest generowane za zdarzeniem keydown
, ale systemy rozpoznawania mowy lub pisma ręcznego mogą wysyłać to zdarzenie bez zdarzeń klawiatury.
Niektóre implementacje mogą wypełniać właściwość CompositionEvent.data
zdarzenia compositionstart
aktualnie zaznaczonym tekstem w dokumencie (w przypadku edytowania lub zastępowania). W przeciwnym razie wartością właściwości CompositionEvent.data
musi być pusty łańcuch znakowy.
Zdarzenie typu compositionstart
musi zostać wysłane bezpośrednio przed rozpoczęciem przez system kompozycji tekstu nowej sesji kompozycji, a także przed modyfikacjami DOM wynikającymi z procesu kompozycji. Domyślną akcją dla tego zdarzenia jest rozpoczęcie przez system kompozycji tekstu nowej sesji kompozycji. Jeśli zdarzenie compositionstart
zostanie anulowane to system kompozycji tekstu powinien usunąć bieżącą sesję kompozycji.
Anulowanie zdarzenia typu compositionstart
różni się od odwołania system kompozycji tekstu we własnej postaci (np. poprzez wciśnięcie przycisku anulowania lub zamykającego okno narzędzia IME).
Niektóre narzędzia IME nie obsługują anulowania w czasie trwania sesji kompozycji (np. biblioteka GTK nie posiada odpowiedniego API). W takich przypadkach wywołanie metody Event.preventDefault()
nie odwoła domyślnej akcji dla zdarzenia compositionstart
.
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>