Ghi lại phím bằng Keyboard Lock API (API Khoá bàn phím)

Cung cấp trải nghiệm sống động, toàn màn hình cho nhiều trường hợp sử dụng, bao gồm cả trang web tương tác, trò chơi và máy tính từ xa hoặc phát trực tuyến ứng dụng.

Thomas Steiner

Ngày càng có nhiều người dùng dành phần lớn thời gian của họ trên trình duyệt, các trang web có khả năng tương tác phong phú, trò chơi, tính năng truyền trực tuyến máy tính từ xa và tính năng truyền trực tuyến ứng dụng cố gắng mang lại trải nghiệm sống động, toàn màn hình. Để thực hiện việc này, các trang web cần quyền truy cập vào các phím đặc biệt và phím tắt khi ở chế độ toàn màn hình để có thể dùng các phím này cho việc điều hướng, trình đơn hoặc chơi trò chơi. Một số ví dụ về các phím có thể cần thiết là Esc, Alt + Tab, Cmd + ` và Ctrl + N.

Theo mặc định, ứng dụng web không có các khoá này vì các khoá này được trình duyệt hoặc hệ điều hành cơ bản ghi lại. Keyboard Lock API cho phép các trang web sử dụng tất cả các phím hiện có mà hệ điều hành lưu trữ cho phép (xem phần Khả năng tương thích với trình duyệt).

Ubuntu Linux được truyền trực tuyến đến một thẻ trình duyệt trong Chrome trên macOS (chưa chạy ở chế độ toàn màn hình).
Sự cố: máy tính từ xa Ubuntu Linux được truyền trực tuyến không chạy ở chế độ toàn màn hình và không có tính năng khoá bàn phím đang hoạt động, do đó, hệ điều hành máy chủ macOS vẫn ghi lại các phím hệ thống và trải nghiệm chưa sống động.

Sử dụng Keyboard Lock API

Giao diện Keyboard của Keyboard API cung cấp các hàm bật/tắt tính năng ghi lại thao tác nhấn phím từ bàn phím thực cũng như nhận thông tin về bố cục bàn phím của người dùng.

Điều kiện tiên quyết

Có hai loại chế độ toàn màn hình trong các trình duyệt hiện đại: do JavaScript khởi tạo thông qua Fullscreen API và do người dùng khởi tạo thông qua phím tắt. Keyboard Lock API chỉ hoạt động khi chế độ toàn màn hình do JavaScript khởi tạo đang hoạt động. Sau đây là ví dụ về chế độ toàn màn hình do JavaScript khởi tạo:

await document.documentElement.requestFullscreen();

Phát hiện tính năng

Bạn có thể sử dụng mẫu sau để kiểm tra xem Keyboard Lock API có được hỗ trợ hay không:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

Khoá bàn phím

Phương thức lock() của giao diện Keyboard trả về một lời hứa sau khi bật tính năng ghi lại thao tác nhấn phím cho bất kỳ hoặc tất cả các phím trên bàn phím thực. Phương thức này chỉ có thể ghi lại các khoá được hệ điều hành cơ bản cấp quyền truy cập. Phương thức lock() lấy một mảng gồm một hoặc nhiều mã khoá để khoá. Nếu bạn không cung cấp mã khoá, tất cả khoá sẽ bị khoá. Danh sách các giá trị mã phím hợp lệ có trong thông số kỹ thuật Giá trị mã KeyboardEvent của sự kiện trên giao diện người dùng.

Ghi lại tất cả khoá

Ví dụ sau đây ghi lại tất cả các thao tác nhấn phím.

navigator.keyboard.lock();

Ghi lại các khoá cụ thể

Ví dụ sau đây ghi lại các phím W, A, S và D. Phương thức này sẽ ghi lại các phím này bất kể phím bổ trợ nào được sử dụng với thao tác nhấn phím. Giả sử bố cục QWERTY của Hoa Kỳ, việc đăng ký "KeyW" đảm bảo rằng W, Shift + W, Control + W, Control + Shift + W và tất cả các tổ hợp phím bổ trợ khác có W sẽ được gửi đến ứng dụng. Điều này cũng áp dụng cho "KeyA", "KeyS" và "KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

Bạn có thể phản hồi các thao tác nhấn phím đã ghi bằng sự kiện bàn phím. Ví dụ: mã này sử dụng sự kiện onkeydown:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Mở khoá bàn phím

Phương thức unlock() mở khoá tất cả các khoá do phương thức lock() ghi lại và trả về đồng bộ.

navigator.keyboard.unlock();

Khi một tài liệu bị đóng, trình duyệt luôn gọi ngầm unlock().

Bản minh hoạ

Bạn có thể kiểm thử Keyboard Lock API bằng cách chạy bản minh hoạ trên Glitch. Hãy nhớ xem mã nguồn. Khi nhấp vào nút Chuyển sang chế độ toàn màn hình ở bên dưới, bản minh hoạ sẽ chạy trong một cửa sổ mới để có thể chuyển sang chế độ toàn màn hình.

Lưu ý về bảo mật

Một vấn đề đáng lo ngại với API này là API này có thể được dùng để lấy tất cả các phím và (kết hợp với Fullscreen API và PointerLock API) ngăn người dùng thoát khỏi trang web. Để ngăn chặn điều này, thông số kỹ thuật yêu cầu trình duyệt cung cấp cách để người dùng thoát khỏi chế độ khoá bàn phím ngay cả khi API yêu cầu tất cả các khoá. Trong Chrome, lối thoát này là một thao tác nhấn phím Esc (2 giây) để kích hoạt thao tác thoát khỏi tính năng Khoá bàn phím.

Lời cảm ơn

Bài viết này đã được Joe Medley và Kayce Basques xem xét. Thông số kỹ thuật của tính năng Khoá bàn phím do Gary Kacmarcik và Jamie Walch biên soạn. Hình ảnh chính của Ken Suarez trên Unsplash.