KeyboardEvent#
KeyboardEvent.getModifierState()#
Metoda getModifierState() zwraca boolowską wartość true jeśli przekazany łańcuch znakowy odpowiada klawiszowi modyfikującemu i w chwili wysłania danego zdarzenia miał on aktywny stan, w przeciwnym razie zwrócona zostanie wartość false.
Składnia#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var activeKey = keyboardEvent.getModifierState(key);
activeKey- boolowskietruelubfalse.keyboardEvent- zdarzenie będący obiektem kontekstu.key- łańcuch znakowy reprezentujący klawisz modyfikujący. Według specyfikacji wielkość znaków ma znaczenie (w praktyce wszystko zależy od danej implementacji).
Algorytm wywołania metody getModifierState(key) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć boolowskie
truejeślikeyjest klawiszem modyfikującym i w chwili wysłania do obiektu kontekstu miał on aktywny stan. W przeciwnym razie zwróć boolowskiefalse.
Metoda getModifierState() w przeciwieństwie do standardowych właściwości KeyboardEvent.altKey, KeyboardEvent.ctrlKey, KeyboardEvent.metaKey czy KeyboardEvent.shiftKey pozwala sprawdzić stan aktywności dowolnego klawisza modyfikującego.
Informację pozwalającą odróżnić od siebie lewy i prawy klawisz modyfikujący można odczytać ze zdarzenia klawiatury przy użyciu właściwości KeyboardEvent.location.
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 modifier = "e.getModifierState('" + e.key + "') :";
var data = "Interfejs: " + e
+ "<br>" + "e.type: " + e.type
+ "<br>" + "e.key: " + e.key
+ "<br>" + modifier + e.getModifierState(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 jeden z klawiszy modyfikujących 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ą metodę getModifierState(), a podstawowa różnica polega na tym, że dla IE11 wielkość znaków w argumencie przekazanym do metody nie ma znaczenia.
Interfejs Web IDL#
boolean getModifierState(DOMString key);