Zdarzenia#
Typ select#
| Typ: | select |
|---|---|
| Interfejs: | UIEvent jeśli generowane z interfejsu użytkownika, w przeciwnym razie Event. |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Nie |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu select musi zostać wysłane przez aplikację kliencką w chwili, kiedy użytkownik zaznaczy jakiś tekst. Zdarzenie to wysyłane zostaje po wystąpieniu zaznaczenia.
Specyfikacja D3E nie wprowadza żadnych mechanizmów umożliwiających dostęp do zaznaczonego tekstu. W razie potrzeby język gospodarza powinien określać zasady, które pozwolą użytkownikowi zaznaczać zawartość (z uwzględnieniem międzynarodowych konwencji językowych), w którym momencie zdarzenie typu select jest wysyłane, i jak autor zawartości może uzyskać dostęp do zaznaczonej przez użytkownika zawartości.
Aby uzyskać dostęp do zaznaczonej przez użytkownika treści autorzy tych treści mogą używać natywnych możliwości języków gospodarzy, np. zdefiniowanych w specyfikacji "HTML Editing APIs" metod Window.getSelection() i Document.getSelection().
W przypadku HTML5 zdarzenie typu select jest automatycznie odpalane przez przeglądarki internetowe po zaznaczeniu tekstu w kontrolkach formularzy, takich jak <input> i <textarea>. Podobny efekt przyniesie użycie jednego z poleceń API dla zaznaczenia pola tekstowego, jak wywołanie metody Element.select(), Element.setSelectionRange(), Element.setRangeText() czy ustawienie właściwości Element.selectionStart, Element.selectionEnd i Element.selectionDirection.
Zdarzenie typu select może nie być dostępne dla wszystkich elementów we wszystkich językach. W HTML5 będą to jedynie elementy <input> i <textarea>, ale implementacje mogą wysyłać zdarzenie w każdym kontekście uznanym za właściwy, włącznie z zaznaczeniami tekstu poza kontrolkami formularzy, lub zaznaczeniami obrazów i struktury znacznikowej, jak ma to miejsce w SVG.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Zaznacz tekst w następującej kontrolce:
<input size="40" type="text" value="Jakiś początkowy tekst">
</p>
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
<script>
var info = document.getElementById("info");
var input = document.getElementsByTagName("input")[0];
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.target: " + e.target
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
input.addEventListener("select", readInfo, false); // faza celu - trzeci argument nieistotny
window.addEventListener("select", readInfo, true);
document.addEventListener("select", readInfo, false);
input.parentNode.addEventListener("select", readInfo, false);
</script>
</body>
</html>