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 March 2017.
* Some parts of this feature may have varying levels of support.
TheKeyboardEvent.getModifierState() method returns thecurrent 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
keyA modifier key value. The value must be one of the
KeyboardEvent.keyvalues which represent modifier keys, or the string"Accel"Deprecated. This is case-sensitive.
Return value
A boolean.
Modifier keys on Firefox
WhengetModifierState() returns true on Firefox?
| Windows | Linux (GTK) | Mac | Android 2.3 | Android 3.0 or later | |
|---|---|---|---|---|---|
"Alt" | EitherAlt key orAltGr key pressed | Alt key pressed | ⌥ Option key pressed | Alt key oroption key pressed | |
"AltGraph" | BothAlt andCtrl keys are pressed, orAltGr key is pressed | Level 3 Shift key (orLevel 5 Shift key) pressed | ⌥ Option key pressed | ❌Not supported | ❌Not supported |
"CapsLock" | During LED for⇪ Caps Lock turned on | ❌Not supported | WhileCapsLock is locked | ||
"Control" | EitherCtrl key orAltGr key pressed | Ctrl key pressed | control key pressed | menu key pressed. | Ctrl key,control key ormenu 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 orcommand key pressed |
"NumLock" | During LED forNum Lock turned on | A key on numpad pressed | ❌Not supported | WhileNumLock is locked | |
"OS" | ⊞ Windows Logo key pressed (before Firefox 118) | Super key orHyper key pressed (typically, mapped to⊞ Windows Logo key) | ❌Not supported | ❌Not supported | ❌Not supported |
"ScrollLock" | During LED forScroll Lock turned on | During LED forScroll Lock turned on, but typically this isn't supported by platform | ❌Not supported | ❌Not supported | WhileScrollLock 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 hasbeen effectivelydeprecated in current drafts of the DOM3 Eventsspecification.
getModifierState() also accepts a deprecated virtual modifier named"Accel".event.getModifierState("Accel") returnstrue when at least one ofKeyboardEvent.ctrlKey orKeyboardEvent.metaKey istrue.
In old implementations and outdated specifications, it returnedtrue whena modifier which is the typical modifier key for the shortcut key is pressed. Forexample, on Windows, pressingCtrl key may make it returntrue.However, on Mac, pressing⌘ Command key may make it returntrue.Note that which modifier key makes it return true depends on platforms, browsers, anduser 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", usingevent.altKey,event.ctrlKey,event.metaKey andevent.shiftKey may be more preferable.
Specifications
| Specification |
|---|
| UI Events # dom-keyboardevent-getmodifierstate |
Browser compatibility
See also
- The
KeyboardEventthis method belongs to. MouseEvent.getModifierState