KeyboardEvent: getModifierState() 方法

KeyboardEvent.getModifierState() 方法返回指定修饰键的当前状态:如果修饰键处于活动状态(即修饰键被按下或锁定),则返回 true,否则返回 false

语法

js
getModifierState(key)

参数

key

一个修饰键值。该值必须是 KeyboardEvent.key 值之一,这些值表示修饰键,或者字符串 "Accel" 已弃用 。区分大小写。

返回值

一个布尔值。

Firefox 上的修饰键

getModifierState() 在 Firefox 上返回 true 时?

Windows Linux (GTK) Mac Android 2.3 Android 3.0 或更高版本
"Alt" 按下 Alt 键或 AltGr 按下 Alt 按下 ⌥ Option 按下 Alt 键或 option
"AltGraph"

同时按下 AltCtrl 键,或按下 AltGr

按下 Level 3 Shift 键(或 Level 5 Shift 键) 按下 ⌥ Option 不支持 不支持
"CapsLock" ⇪ Caps Lock LED 处于开启状态时 不支持 CapsLock 锁定期间
"Control" 按下 Ctrl 键或 AltGr 按下 Ctrl 按下 control 按下 menu 键。 按下 Ctrl 键、control 键或 menu 键。
"Fn" 不支持 不支持 不支持 不支持 按下 Function 键,但我们不确定哪个键使修饰符状态处于活动状态。Mac 键盘上的 Fn 键不会导致此活动状态。
"FnLock" 不支持 不支持 不支持 不支持 不支持
"Hyper" 不支持 不支持 不支持 不支持 不支持
"Meta" 按下 ⊞ Windows Logo 键(自 Firefox 118 起) 按下 Meta 按下 ⌘ Command 不支持 按下 ⊞ Windows Logo 键或 command
"NumLock" Num Lock LED 处于开启状态时 按下数字键盘上的某个键 不支持 NumLock 锁定期间
"OS" 按下 ⊞ Windows Logo 键(在 Firefox 118 之前) 按下 Super 键或 Hyper 键(通常映射到 ⊞ Windows Logo 键) 不支持 不支持 不支持
"ScrollLock" Scroll Lock LED 处于开启状态时 Scroll Lock LED 处于开启状态时,但通常平台不支持 不支持 不支持 ScrollLock 锁定期间
"Shift" 按下 ⇧ Shift
"Super" 不支持 不支持 不支持 不支持 不支持
"Symbol" 不支持 不支持 不支持 不支持 不支持
"SymbolLock" 不支持 不支持 不支持 不支持 不支持
  • 在其他平台上,可能支持 "Alt"、"Control" 和 "Shift"。
  • 对于 Firefox 上的不可信事件,始终支持所有修饰符(除了在 Firefox 实现此功能后定义的 "FnLock""Hyper""Super""Symbol")。这与平台无关。

"Accel" 虚拟修饰符

注意:"Accel" 虚拟修饰符在 DOM3 事件规范的当前草案中实际上已经弃用了。

getModifierState() 还接受一个名为 "Accel" 的已弃用的虚拟修饰符。当 KeyboardEvent.ctrlKeyKeyboardEvent.metaKey 中至少有一个为 true 时,event.getModifierState("Accel") 返回 true

在旧的实现和过时的规范中,它在按下快捷键的典型修饰键时返回 true。例如,在 Windows 上,按下 Ctrl 键可能会使其返回 true。但是,在 Mac 上,按下 ⌘ Command 键可能会使其返回 true。请注意,哪个修饰键使其返回 true 取决于平台、浏览器和用户设置。例如,Firefox 用户可以通过首选项 "ui.key.accelKey" 自定义它。

示例

js
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;
    }
  }
}

注意:虽然此示例使用 "Alt""Control""Meta""Shift".getModifierState() 配合使用,但使用 event.altKeyevent.ctrlKeyevent.metaKeyevent.shiftKey 可能更可取。

规范

规范
UI 事件
# dom-keyboardevent-getmodifierstate

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见