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 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 dùng 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. API khoá bàn phím cho phép trang web dùng tất cả các khoá hiện có mà hệ điều hành của máy chủ cho phép (xem bài viết Khả năng tương thích của 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 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ỉ có sẵn khi chế độ 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 sẽ trả về một hàm xác thực sau khi bật tính năng ghi lại số lần 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ã 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ể bạn sử dụng phím bổ trợ nào 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á được 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 chắc chắn kiểm tra 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.

Những điều cần cân nhắc về bảo mật

Một vấn đề đáng lo ngại về API này là API này 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à API PointerLock) 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 cho người dùng cách thức để thoát khỏi phương thức 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 (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 do Joe Medley và Kayce Basques đánh giá. 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.