KeyboardEvent#
KeyboardEvent.key#
Właściwość key zwraca łańcuch znakowy reprezentujący wciśnięty klawisz (po uwzględnieniu wszelkich zmian klawiaturowych), który spowodował wysłanie danego zdarzenia. Właściwość jest tylko do odczytu.
Składnia#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var final_key = keyboardEvent.key;
gdzie poszczególne człony oznaczają:
final_key- łańcuch znakowy reprezentujący wciśnięty klawisz (po modyfikacjach).keyboardEvent- zdarzenie będące obiektem kontekstu.
Przy tworzeniu zdarzenia wartością domyślną dla właściwości key musi być pusty łańcuch znakowy.
W przypadku klawiszy z drukowaną prezentacją wartością właściwości key musi być niepusty łańcuch znakowy Unicode, zgodny z algorytmem określania wartości klawisza. Dla klawiszy kontrolnych bez drukowanej prezentacji wartość musi pochodzić z któregoś zestawu wartości klawiszy. Implementacje, które nie są w stanie zidentyfikować klawisza muszą użyć łańcucha znakowego 'Unidentified'.
W przypadku syntetycznych zdarzeń możemy samodzielnie ustawić wartość klawisza (po modyfikacjach) dla zdarzenia, np. w czasie tworzenia lub inicjowania zdarzenia.
Wartość klawisza bez uwzględnienia modyfikacji można odczytać przy użyciu właściwości KeyboardEvent.code.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {outline: 5px solid green;}
</style>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var input = document.getElementById("input");
var info = document.getElementById("info");
function readInfo(e){
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.code: " + e.code
+ "<br>" + "e.key: " + e.key + "<br><br>";
info.innerHTML = info.innerHTML + data;
}
input.addEventListener("keydown", readInfo, false);
input.addEventListener("keyup", readInfo, false);
}
</script>
</head>
<body>
<p>Ustaw zogniskowanie w poniższej kontrolce i wciśnij dowolny klawisz (z opcjonalnym modyfikatorem) by uzyskać szczegółowe informacje dla zdarzenia.</p>
<input id="input" type="text" value="Wybierz mnie">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
</body>
</html>Na chwilę obecną jedynie przeglądarki Firefox i IE11 obsługują właściwość key.
Interfejs Web IDL#
readonly attribute DOMString key;