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>