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

Mang đến 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ả việc truyền trực tuyến ứng dụng hoặc máy tính từ xa đến trang web, trò chơi tương tác.

Thomas Steiner

Với ngày càng 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, trò chơi, tính năng truy cập trực tuyến trên máy tính từ xa và ứng dụng truyền trực tuyến luôn cố gắng mang đến trải nghiệm toàn màn hình sống động. Để thực hiện điều này, các trang web cần 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ể dùng cho các thao tá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, các phím này không khả dụng với ứng dụng web vì chúng được ghi lại bởi trình duyệt hoặc hệ điều hành cơ bản. 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 lưu trữ 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 macOS Chrome (chưa chạy ở chế độ toàn màn hình).
Vấn đề: một máy tính từ xa chạy Ubuntu Linux không chạy ở chế độ toàn màn hình và không có phương thứ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 lưu trữ 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 chế độ ghi lại thao tác nhấn phím bằng 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ó 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. 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 để 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 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á mà 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ã phím để khoá. Nếu bạn không cung cấp mã phím, tất cả các khoá sẽ bị khoá. Bạn có thể xem danh sách giá trị mã phím hợp lệ trong thông số kỹ thuật Giá trị mã sự kiện bàn phím của sự kiện giao diện người dùng.

Đang chụp tất cả các phím

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 phím này bất kể phím bổ trợ nào được sử dụng khi nhấn phím. Giả sử 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 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 các sự kiện bàn phím. Ví dụ: đoạn 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.
  }
});

Đang mở khoá bàn phím

Phương thức unlock() mở khoá tất cả các khoá mà 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 bị đóng, trình duyệt luôn ngầm gọi unlock().

Bản minh hoạ

Bạn có thể kiểm tra 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 kiểm tra mã nguồn. Hãy nhấp vào nút "Vào chế độ toàn màn hình" ở bên dưới để mở bản minh hoạ 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 dài (hai giây) để kích hoạt thao tác thoát khỏi tính năng Khoá bàn phím.

Xác nhận

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