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

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

Thomas Steiner

Khi ngày càng có nhiều người dùng dành phần lớn thời gian trên trình duyệt, các trang web, 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ó tính tương tác cao sẽ cố gắng mang lại trải nghiệm toàn màn hình sống động. Để làm được điều 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, nhờ đó có thể dùng các phím này để đ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 thể sử dụng các phím 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 có sẵn 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).
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 bật/tắt tính năng ghi lại thao tác nhấn phím trên 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 API Toàn màn hình 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 JavaScript-initiated full screen (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 vật lý. Phương thức này chỉ có thể ghi lại các phím đượ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á. Bạn có thể xem danh sách các giá trị mã phím hợp lệ trong thông số kỹ thuật Giá trị mã KeyboardEvent của sự kiện giao diện người dùng.

Đang ghi lại tất cả các phím

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 phím cụ thể

Ví dụ sau đây ghi lại các phím W, A, S và D. Trình nghe này ghi lại các phím này bất kể phím bổ trợ nào được dùng khi nhấn phím. 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 với 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 các thao tác nhấn phím đã ghi lại 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 phím được phương thức lock() thu thập 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 ẩn.

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. Hãy nhớ xem 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ẽ mở ra 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 phím 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 cách để người dùng thoát khỏi tính năng 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à thao tác nhấn và giữ phím Esc (trong 2 giây) để 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 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.