Zdarzenia#
Typ keyup#
| Typ: | keyup |
|---|---|
| Interfejs: | KeyboardEvent |
| Sync / Async: | Sync |
| Bąbelkowanie | Tak |
| Zaufane cele | Element |
| Anulowanie | Tak |
| Domyślna akcja | Brak |
| Kontekst (zaufane zdarzenia) |
|
Zdarzenie typu keyup musi zostać wysłane przez aplikację kliencką w chwili, kiedy klawisz został zwolniony. Zdarzenie keyup jest zależne od urządzenia i opiera się na możliwościach urządzeń wejściowych oraz sposobu ich mapowania w systemie operacyjnym. Zdarzenie to musi zostać wygenerowane po mapowaniu klawisza. Zdarzenie to musi zostać wysłane za zdarzeniami keydown, beforeinput i input powiązanymi z tym samym klawiszem.
Zdarzenia typu keyup i keydown zostały przewidziane do wykrywania dowolnego klawisza, a nie tylko tego, który produkuje wartość znakową.
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 klawiatury 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 loc_cons = ["DOM_KEY_LOCATION_STANDARD", "DOM_KEY_LOCATION_LEFT", "DOM_KEY_LOCATION_RIGHT", "DOM_KEY_LOCATION_NUMPAD"];
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.code: " + e.code
+ "<br>" + "e.key: " + e.key
+ "<br>" + "e.repeat: " + e.repeat
+ "<br>" + "e.isComposing: " + e.isComposing
+ "<br>" + "e.location: " + e.location + " [" + loc_cons[e.location] + "]"
+ "<br>" + "e.currentTarget: " + e.currentTarget
+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
box.addEventListener("keydown", readInfo, false);
box.addEventListener("keyup", readInfo, false);
input.addEventListener("keydown", readInfo, false);
input.addEventListener("keyup", readInfo, false);
</script>
</body>
</html>Specyfikacje i inne materiały#
Pasek społecznościowy