files/en-us/web/api/keyboardevent/getmodifierstate/index.md
{{APIRef("UI Events")}}
The KeyboardEvent.getModifierState() method returns the
current state of the specified modifier key: true if the modifier is active
(that is the modifier key is pressed or locked), otherwise, false.
getModifierState(key)
key
"Accel"
{{deprecated_inline}}. This is case-sensitive.A boolean.
When getModifierState() returns true on Firefox?
"FnLock", "Hyper", "Super" and "Symbol" which are defined after Firefox implements this) are always supported for untrusted events on Firefox.
This doesn't depend on the platform."Accel" virtual modifier[!NOTE] The
"Accel"virtual modifier has been effectively deprecated in current drafts of the DOM3 Events specification.
getModifierState() also accepts a deprecated virtual modifier named
"Accel". event.getModifierState("Accel") returns
true when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or
{{domxref("KeyboardEvent.metaKey")}} is true.
In old implementations and outdated specifications, it returned true when
a modifier which is the typical modifier key for the shortcut key is pressed. For
example, on Windows, pressing <kbd>Ctrl</kbd> key may make it return true.
However, on Mac, pressing <kbd>⌘ Command</kbd> key may make it return true.
Note that which modifier key makes it return true depends on platforms, browsers, and
user settings. For example, Firefox users can customize this with a pref,
"ui.key.accelKey".
function handleKeyboardEvent(event) {
// Ignore if following modifier is active.
if (
event.getModifierState("Fn") ||
event.getModifierState("Hyper") ||
event.getModifierState("OS") ||
event.getModifierState("Super") ||
event.getModifierState("Win") /* hack for IE */
) {
return;
}
// Also ignore if two or more modifiers except Shift are active.
if (
event.getModifierState("Control") +
event.getModifierState("Alt") +
event.getModifierState("Meta") >
1
) {
return;
}
// Handle shortcut key with standard modifier
if (event.getModifierState("Accel")) {
switch (event.key.toLowerCase()) {
case "c":
if (event.getModifierState("Shift")) {
// Handle Accel + Shift + C
event.preventDefault(); // consume the key event
}
break;
case "k":
if (!event.getModifierState("Shift")) {
// Handle Accel + K
event.preventDefault(); // consume the key event
}
break;
}
return;
}
// Do something different for arrow keys if ScrollLock is locked.
if (
(event.getModifierState("ScrollLock") ||
event.getModifierState("Scroll")) /* hack for IE */ &&
!event.getModifierState("Control") &&
!event.getModifierState("Alt") &&
!event.getModifierState("Meta")
) {
switch (event.key) {
case "ArrowDown":
case "Down": // hack for IE and old Firefox
event.preventDefault(); // consume the key event
break;
case "ArrowLeft":
case "Left": // hack for IE and old Firefox
// Do something different if ScrollLock is locked.
event.preventDefault(); // consume the key event
break;
case "ArrowRight":
case "Right": // hack for IE and old Firefox
// Do something different if ScrollLock is locked.
event.preventDefault(); // consume the key event
break;
case "ArrowUp":
case "Up": // hack for IE and old Firefox
// Do something different if ScrollLock is locked.
event.preventDefault(); // consume the key event
break;
}
}
}
[!NOTE] Although this example uses
.getModifierState()with"Alt","Control","Meta"and"Shift", usingevent.altKey,event.ctrlKey,event.metaKeyandevent.shiftKeymay be more preferable.
{{Specifications}}
{{Compat}}