KeyboardEvent: getModifierState() メソッド

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.

KeyboardEvent.getModifierState() メソッドは、指定された修飾キーの現在の状態を返します。修飾キーが有効な場合（すなわち修飾キーが押されているかロックされている場合）は true、そうでなければ false になります。

構文

js
getModifierState(key)

引数

key

修飾キーの値。値は修飾キーを表す KeyboardEvent.key 値のいずれか、または文字列 "Accel" でなければなりません。これは大文字と小文字を区別します。

返値

論理値です。

Firefox での修飾キー

Firefox で getModifierState() が true を返すときです。

Windows Linux (GTK) Mac Android 2.3 Android 3.0 or later
"Alt" Alt キーか AltGr キーが押されている Alt キーが押されている ⌥ Option キーが押されている Alt キーか option キーが押されている
"AltGraph"

Alt と Ctrl の両方のキーが押されている、または 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 ロゴ キーが押されている（Firefox 118 以降） Meta キーが押されている ⌘ Command キーが押されている ❌ 未対応 ⊞ Windows ロゴ キーまたは command キーが押されている
"NumLock" Num Lock の LED がオンになっている間 A key on numpad pressed ❌ 未対応 NumLock がロックされている間
"OS" ⊞ Windows ロゴ キーが押されている（Firefox 118 より前） Super キーまたは Hyper キーが押されている（ふつう、 ⊞ Windows ロゴ キーに割り当てられている） ❌ 未対応 ❌ 未対応 ❌ 未対応
"ScrollLock" Scroll Lock の LED がオンになっている間 Scroll Lock の LED がオンになっている間、ただしふつうはプラットフォームが対応していない ❌ 未対応 ❌ 未対応 ScrollLock がロックされている間
"Shift" ⇧ Shift キーが押されている
"Super" ❌ 未対応 ❌ 未対応 ❌ 未対応 ❌ 未対応 ❌ 未対応
"Symbol" ❌ 未対応 ❌ 未対応 ❌ 未対応 ❌ 未対応 ❌ 未対応
"SymbolLock" ❌ 未対応 ❌ 未対応 ❌ 未対応 ❌ 未対応 ❌ 未対応
  • その他のプラットフォームでは、 "Alt", "Control", "Shift" に対応している場合があります。
  • すべての修飾キー（Firefox が実装した後に定義された "FnLock"、"Hyper"、"Super"、"Symbol" を除く）は、 Firefox は信頼されないイベントに対して常に対応します。 これはプラットフォームに依存しません。

"Accel" 仮想修飾子

メモ: "Accel" 仮想修飾子は、 DOM3 Events 仕様の現在のドラフトでは、事実上非推奨とされています。

getModifierState() は "Accel" という名前の非推奨の仮想修飾子も受け入れます。event.getModifierState("Accel") は KeyboardEvent.ctrlKey または KeyboardEvent.metaKey の少なくともどちらかが true である場合に 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;
    }
  }
}

メモ: この例は .getModifierState() を "Alt", "Control", "Meta", "Shift" で使用していますが、 event.altKey, event.ctrlKey, event.metaKey, event.shiftKey の方がよりお勧めです。

仕様書

Specification
UI Events
# dom-keyboardevent-getmodifierstate

ブラウザーの互換性

BCD tables only load in the browser

関連情報