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

Mang đến 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à truyền phát trực tuyến ứng dụng hoặc máy tính từ xa.

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ọ cho trình duyệt, các trang web tương tác phong phú, trò chơi, tính năng phát trực tuyến từ xa và tính năng phát trực tuyến ứng dụng đều cố gắng mang lại trải nghiệm sống động trên toàn màn hình. Để làm được việc này, các trang web cần có 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 cho việc điều hướng, mở 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 dùng được các khoá này vì chúng đượ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 máy chủ cho phép (xem phần 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).
Vấn đề: 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ó 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 Keyboard Lock API

Giao diện Keyboard của Keyboard API cung cấp các hàm chuyển đổi chế độ ghi nhận thao tác nhấn phím từ bàn phím thực cũng như lấy 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 một phím tắt. Keyboard Lock API chỉ dùng được 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 đối tượ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 cho phép ghi lại các 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 những 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á nào, thì tất cả các khoá sẽ bị khoá. Bạn có thể xem danh sách các giá trị mã khoá hợp lệ trong quy cách Giá trị mã KeyboardEvent của sự kiện trên giao diện người dùng.

Ghi lại tất cả các khoá

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

navigator.keyboard.lock();

Ghi lại các phím cụ thể

Ví dụ sau đây ghi lại các phím W, A, S và D. Thao tác này sẽ ghi lại các khoá này bất kể bạn dùng phím bổ trợ nào khi nhấn khoá. Giả sử bố cục bàn phím là 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 đều đượ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 lại bằng cách sử dụ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() sẽ 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 unlock() một cách ngầm định.

Bản minh hoạ

Bạn có thể kiểm thử Keyboard Lock API bằng cách chạy bản minh hoạ này. Nhớ kiểm tra mã nguồn. Khi bạn 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ẽ khởi 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 mối lo ngại về 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 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, quy cách yêu cầu trình duyệt cung cấp cho người dùng một cách để thoát khỏi chế độ 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 lần nhấn phím Esc trong thời gian dài (2 giây) để kích hoạt lệnh thoát khỏi chế độ 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. Quy cách 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.