Chế độ toàn màn hình hiệu quả hơn nhờ Keyboard Lock API (API Khoá bàn phím)

Sử dụng Keyboard Lock API để ghi lại phím Escape ở chế độ toàn màn hình.

Thomas Steiner

Nếu từng chơi một trò chơi web ở chế độ toàn màn hình và trò chơi đó xuất hiện một hộp thoại trong trò chơi mà bạn vô tình huỷ bằng phím Escape, thì có thể bạn đã bị thoát khỏi chế độ toàn màn hình. Trải nghiệm gây khó chịu này là do chế độ hộp thoại và toàn màn hình "tranh giành" phím Escape. Đây là một cuộc chiến không cân sức vì theo mặc định, chế độ toàn màn hình luôn thắng. Nhưng làm cách nào để hộp thoại này là hộp thoại chiến thắng cho phím Escape? Đây là lúc Keyboard Lock API phát huy tác dụng.

Hỗ trợ trình duyệt

Sử dụng Keyboard Lock API

Keyboard Lock API có trên navigator.keyboard. 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 thực. 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. Thật may, phím Escape là một trong số đó.

Nếu ứng dụng của bạn có chế độ toàn màn hình, hãy sử dụng Keyboard Lock API làm một tính năng nâng cao tăng dần bằng cách ghi lại phím Escape khi yêu cầu chế độ toàn màn hình. Mở khoá (tức là không còn ghi lại) bàn phím khi rời khỏi chế độ toàn màn hình bằng phương thức unlock() của giao diện Keyboard.

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

Điều này có nghĩa là khi người dùng ở chế độ toàn màn hình, việc nhấn phím Escape sẽ huỷ hộp thoại theo mặc định. Nếu người dùng nhấn và giữ phím Escape, họ vẫn có thể thoát khỏi chế độ toàn màn hình. Kết hợp những điểm ưu việt nhất của cả hai.

Bản minh hoạ

Bạn có thể kiểm thử cả biến thể mặc định và biến thể được cải tiến dần trong bản minh hoạ. Mã nguồn của bản minh hoạ này ít rõ ràng hơn so với đoạn mã trước đó, vì mã nguồn này cần cho thấy cả hai hành vi.

Trong thực tế

Để sử dụng tính năng cải tiến tăng dần này trong thực tế, bạn chỉ cần sao chép đoạn mã trước đó. API này được thiết kế để hoạt động mà không cần thay đổi, ngay cả với mã toàn màn hình hiện có. Ví dụ: hãy xem PR này cho trò chơi Freeciv. Sau khi PR được hợp nhất, bạn có thể huỷ tất cả hộp thoại trong trò chơi bằng cách nhấn phím Escape.

Một bookmarklet bổ sung

Không phải ứng dụng hoặc trò chơi nào hỗ trợ chế độ toàn màn hình cũng là mã nguồn mở hoặc chấp nhận các bản vá của bạn. Bạn có thể thêm bookmarklet sau đây vào thanh dấu trang rồi nhấp vào để bật chế độ toàn màn hình tốt hơn.