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

Mang lại 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, trò chơi tương tác và tính năng truyền phát ứng dụng hoặc máy tính từ xa.

Thomas Steiner

Khi ngày càng nhiều người dùng dành phần lớn thời gian của họ cho trình duyệt, các trang web, trò chơi, tính năng truyền phát trên máy tính từ xa và truyền trực tuyến ứng dụng luôn nỗ lực mang đến trải nghiệm sống động trên toàn màn hình. Để thực hiện điều này, các trang web cần có quyền truy cập vào các phím và phím tắt đặc biệt khi ở chế độ toàn màn hình để có thể sử dụng cho mục đích đ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, các khoá này không có sẵn cho ứng dụng web vì chúng được trình duyệt hoặc hệ điều hành cơ bản ghi lại. API khoá bàn phím cho phép các trang web sử dụng tất cả các phím có sẵn mà hệ điều hành máy chủ cho phép (xem phần Khả năng tương thích với trình duyệt).

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

Sử dụng API Khoá bàn phím

Giao diện Keyboard của API Bàn phím cung cấp các chức năng bật/tắt tính năng ghi lại thao tác nhấn phím trên bàn phím vật lý, 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ó 2 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 API Toàn màn hình và do người dùng khởi tạo thông qua phím tắt. API khoá bàn phím chỉ hoạt động khi chế độ toàn màn hình do JavaScript khởi tạo đang hoạt động. Dưới đâ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 đây để kiểm tra xem API khoá bàn phím có được hỗ trợ hay không:

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

Đang khoá bàn phím

Phương thức lock() của giao diện Keyboard sẽ trả về một lời hứa sau khi bật 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 vật lý. 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ã phím, tất cả các khoá sẽ bị khoá. Danh sách các giá trị mã khoá hợp lệ có trong thông số kỹ thuật Sự kiện giao diện người dùng Bàn phím sự kiện Giá trị mã.

Đang chụp lại tất cả các khoá

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

navigator.keyboard.lock();

Chụp các phím cụ thể

Ví dụ sau đây minh hoạ các phím W, A, S và D. Thao tá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 cùng với thao tác nhấn phím. Giả sử một bố cục QWERTY của Hoa Kỳ, việc đăng ký "KeyW" sẽ đả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 đều được gửi đến ứng dụng. Điều tương tự 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 thao tác nhấn phím đã ghi bằng các 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() thu thập và trả về một cách đồng bộ.

navigator.keyboard.unlock();

Khi một tài liệu được đóng, trình duyệt sẽ luôn ngầm gọi unlock().

Bản minh hoạ

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

Các yếu tố cần cân nhắc về bảo mật

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

Xác nhận

Bài viết này đã được Joe Medley và Kayce Basques đánh giá. Thông số kỹ thuật về Khoá bàn phím là do Gary Kacmar dừng và Jamie Walch soạn thảo. Hình ảnh chính của Ken Suarez trên Unsplash.