Zdarzenia#

Typ select#

Typ:select
Interfejs:UIEvent jeśli generowane z interfejsu użytkownika, w przeciwnym razie Event.
Sync / Async:Sync
BąbelkowanieTak
Zaufane celeElement
AnulowanieNie
Domyślna akcjaBrak
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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Zdarzenia (H1) Typ select (H2) Specyfikacje i inne materiały (H3)