KeyboardEvent: phương thức getModifierState()

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.

Phương thức KeyboardEvent.getModifierState() trả về trạng thái hiện tại của phím bổ trợ được chỉ định: true nếu bổ trợ đang hoạt động (phím bổ trợ đang được nhấn hoặc khóa), ngược lại là false.

Cú pháp

js
getModifierState(key)

Tham số

key

Một giá trị phím bổ trợ. Giá trị phải là một trong các giá trị KeyboardEvent.key biểu diễn phím bổ trợ, hoặc chuỗi "Accel" Đã lỗi thời . Phân biệt chữ hoa chữ thường.

Giá trị trả về

Một boolean.

Phím bổ trợ trên Firefox

Khi nào getModifierState() trả về true trên Firefox?

Windows Linux (GTK) Mac Android 2.3 Android 3.0 trở lên
"Alt" Phím Alt hoặc phím AltGr được nhấn Phím Alt được nhấn Phím ⌥ Option được nhấn Phím Alt hoặc phím option được nhấn
"AltGraph"

Cả hai phím AltCtrl đều được nhấn, hoặc phím AltGr được nhấn

Phím Level 3 Shift (hoặc phím Level 5 Shift) được nhấn Phím ⌥ Option được nhấn Không hỗ trợ Không hỗ trợ
"CapsLock" Trong khi đèn LED của ⇪ Caps Lock sáng Không hỗ trợ Trong khi CapsLock được khóa
"Control" Phím Ctrl hoặc phím AltGr được nhấn Phím Ctrl được nhấn Phím control được nhấn Phím menu được nhấn. Phím Ctrl, phím control hoặc phím menu được nhấn.
"Fn" Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ Phím Function được nhấn, nhưng chúng tôi không chắc phím nào làm cho trạng thái bổ trợ hoạt động. Phím Fn trên bàn phím Mac không gây ra trạng thái này hoạt động.
"FnLock" Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ
"Hyper" Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ
"Meta" Phím ⊞ Windows Logo được nhấn (từ Firefox 118) Phím Meta được nhấn Phím ⌘ Command được nhấn Không hỗ trợ Phím ⊞ Windows Logo hoặc phím command được nhấn
"NumLock" Trong khi đèn LED của Num Lock sáng Một phím trên bàn phím số được nhấn Không hỗ trợ Trong khi NumLock được khóa
"OS" Phím ⊞ Windows Logo được nhấn (trước Firefox 118) Phím Super hoặc phím Hyper được nhấn (thường được ánh xạ thành phím ⊞ Windows Logo) Không hỗ trợ Không hỗ trợ Không hỗ trợ
"ScrollLock" Trong khi đèn LED của Scroll Lock sáng Trong khi đèn LED của Scroll Lock sáng, nhưng thường điều này không được nền tảng hỗ trợ Không hỗ trợ Không hỗ trợ Trong khi ScrollLock được khóa
"Shift" Phím ⇧ Shift được nhấn
"Super" Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ
"Symbol" Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ
"SymbolLock" Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ Không hỗ trợ
  • Trên các nền tảng khác, "Alt", "Control" và "Shift" có thể được hỗ trợ.
  • Tất cả các bổ trợ (ngoại trừ "FnLock", "Hyper", "Super""Symbol" được định nghĩa sau khi Firefox triển khai tính năng này) luôn được hỗ trợ cho các sự kiện không đáng tin cậy trên Firefox. Điều này không phụ thuộc vào nền tảng.

Bổ trợ ảo "Accel"

Note: Bổ trợ ảo "Accel" đã bị loại bỏ hiệu quả trong các bản nháp hiện tại của đặc tả DOM3 Events.

getModifierState() cũng chấp nhận một bổ trợ ảo đã loại bỏ có tên là "Accel". event.getModifierState("Accel") trả về true khi ít nhất một trong hai KeyboardEvent.ctrlKey hoặc KeyboardEvent.metaKeytrue.

Trong các triển khai cũ và các đặc tả đã lỗi thời, nó trả về true khi một bổ trợ là phím bổ trợ điển hình cho phím tắt được nhấn. Ví dụ, trên Windows, nhấn phím Ctrl có thể khiến nó trả về true. Tuy nhiên, trên Mac, nhấn phím ⌘ Command có thể khiến nó trả về true. Lưu ý rằng phím bổ trợ nào khiến nó trả về true phụ thuộc vào nền tảng, trình duyệt, và cài đặt người dùng. Ví dụ, người dùng Firefox có thể tùy chỉnh điều này bằng một pref, "ui.key.accelKey".

Ví dụ

js
function handleKeyboardEvent(event) {
  // Bỏ qua nếu các bổ trợ sau đang hoạt động.
  if (
    event.getModifierState("Fn") ||
    event.getModifierState("Hyper") ||
    event.getModifierState("OS") ||
    event.getModifierState("Super") ||
    event.getModifierState("Win") /* hack cho IE */
  ) {
    return;
  }

  // Cũng bỏ qua nếu hai hoặc nhiều bổ trợ ngoại trừ Shift đang hoạt động.
  if (
    event.getModifierState("Control") +
      event.getModifierState("Alt") +
      event.getModifierState("Meta") >
    1
  ) {
    return;
  }

  // Xử lý phím tắt với bổ trợ tiêu chuẩn
  if (event.getModifierState("Accel")) {
    switch (event.key.toLowerCase()) {
      case "c":
        if (event.getModifierState("Shift")) {
          // Xử lý Accel + Shift + C
          event.preventDefault(); // tiêu thụ sự kiện phím
        }
        break;
      case "k":
        if (!event.getModifierState("Shift")) {
          // Xử lý Accel + K
          event.preventDefault(); // tiêu thụ sự kiện phím
        }
        break;
    }
    return;
  }

  // Thực hiện hành động khác cho các phím mũi tên nếu ScrollLock được khóa.
  if (
    (event.getModifierState("ScrollLock") ||
      event.getModifierState("Scroll")) /* hack cho IE */ &&
    !event.getModifierState("Control") &&
    !event.getModifierState("Alt") &&
    !event.getModifierState("Meta")
  ) {
    switch (event.key) {
      case "ArrowDown":
      case "Down": // hack cho IE và Firefox cũ
        event.preventDefault(); // tiêu thụ sự kiện phím
        break;
      case "ArrowLeft":
      case "Left": // hack cho IE và Firefox cũ
        // Thực hiện hành động khác nếu ScrollLock được khóa.
        event.preventDefault(); // tiêu thụ sự kiện phím
        break;
      case "ArrowRight":
      case "Right": // hack cho IE và Firefox cũ
        // Thực hiện hành động khác nếu ScrollLock được khóa.
        event.preventDefault(); // tiêu thụ sự kiện phím
        break;
      case "ArrowUp":
      case "Up": // hack cho IE và Firefox cũ
        // Thực hiện hành động khác nếu ScrollLock được khóa.
        event.preventDefault(); // tiêu thụ sự kiện phím
        break;
    }
  }
}

Note: Mặc dù ví dụ này sử dụng .getModifierState() với "Alt", "Control", "Meta""Shift", việc sử dụng event.altKey, event.ctrlKey, event.metaKeyevent.shiftKey có thể được ưu tiên hơn.

Đặc điểm kỹ thuật

Thông số kỹ thuật
UI Events
# dom-keyboardevent-getmodifierstate

Tương thích trình duyệt

Xem thêm