KeyboardEvent: getModifierState() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
.
Syntax
getModifierState(key)
Parameters
key
-
A modifier key value. The value must be one of the
KeyboardEvent.key
values which represent modifier keys, or the string"Accel"
Deprecated . This is case-sensitive.
Return value
A boolean.
Modifier keys on Firefox
When getModifierState()
returns true on Firefox?
Windows | Linux (GTK) | Mac | Android 2.3 | Android 3.0 or later | |
---|---|---|---|---|---|
"Alt" |
Either Alt key or AltGr key pressed | Alt key pressed | ⌥ Option key pressed | Alt key or option key pressed | |
"AltGraph" |
Both Alt and Ctrl keys are pressed, or AltGr key is pressed |
Level 3 Shift key (or Level 5 Shift key) pressed | ⌥ Option key pressed | ❌ Not supported | ❌ Not supported |
"CapsLock" |
During LED for ⇪ Caps Lock turned on | ❌ Not supported | While CapsLock is locked | ||
"Control" |
Either Ctrl key or AltGr key pressed | Ctrl key pressed | control key pressed | menu key pressed. | Ctrl key, control key or menu key pressed. |
"Fn" |
❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported | Function key is pressed, but we're not sure what key makes the modifier state active. Fn key on Mac keyboard doesn't cause this active. |
"FnLock" |
❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported |
"Hyper" |
❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported |
"Meta" |
⊞ Windows Logo key pressed (from Firefox 118) | Meta key pressed | ⌘ Command key pressed | ❌ Not supported | ⊞ Windows Logo key or command key pressed |
"NumLock" |
During LED for Num Lock turned on | A key on numpad pressed | ❌ Not supported | While NumLock is locked | |
"OS" |
⊞ Windows Logo key pressed (before Firefox 118) | Super key or Hyper key pressed (typically, mapped to ⊞ Windows Logo key) | ❌ Not supported | ❌ Not supported | ❌ Not supported |
"ScrollLock" |
During LED for Scroll Lock turned on | During LED for Scroll Lock turned on, but typically this isn't supported by platform | ❌ Not supported | ❌ Not supported | While ScrollLock is locked |
"Shift" |
⇧ Shift key pressed | ||||
"Super" |
❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported |
"Symbol" |
❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported |
"SymbolLock" |
❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported | ❌ Not supported |
- On the other platforms, "Alt", "Control" and "Shift" may be supported.
-
All modifiers (except
"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 KeyboardEvent.ctrlKey
or
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 Ctrl key may make it return true
.
However, on Mac, pressing ⌘ Command 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"
.
Examples
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"
, using
event.altKey
, event.ctrlKey
, event.metaKey
and
event.shiftKey
may be more preferable.
Specifications
Specification |
---|
UI Events # dom-keyboardevent-getmodifierstate |
Browser compatibility
BCD tables only load in the browser
See also
- The
KeyboardEvent
this method belongs to. MouseEvent.getModifierState