Sử dụng API Khoá bàn phím để chụp phím Escape ở chế độ toàn màn hình.
Nếu bạn từng chơi một trò chơi trên web toàn màn hình, hộp thoại trong trò chơi bật lên và bạn đã tự ý huỷ bằng phím Escape, thì có thể bạn đã thấy mình bị thoát khỏi chế độ toàn màn hình. Trải nghiệm khó chịu này là do hộp thoại và chế độ toàn màn hình "chiến đấu" với phím Escape. Đây là một cuộc chiến không công bằng vì theo mặc định, chế độ toàn màn hình luôn chiến thắng. Nhưng làm cách nào để hộp thoại giành chiến thắng cho phím Escape? Đây là nơi API Khoá bàn phím phát huy tác dụng.
Hỗ trợ trình duyệt
Sử dụng API Khoá bàn phím
API Khoá bàn phím có trên navigator.keyboard. Phương thức lock() của giao diện Keyboard sẽ trả về một lời hứa sau khi bật tính năng 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. May mắn thay, 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 API Khoá bàn phím như một tính năng nâng cao tăng dần bằng cách chụp phím Escape khi yêu cầu chế độ toàn màn hình. Mở khoá (tức là không còn chụp) bàn phím khi rời khỏi chế độ toàn màn hình thông qua 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 đang ở chế độ toàn màn hình, thao tác nhấn 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. Những điều tuyệt vời nhất ở cả hai thế giới.
Bản minh hoạ
Bạn có thể kiểm thử cả biến thể mặc định và biến thể được nâng cao dần trong bản minh hoạ. Mã nguồn của bản minh hoạ kém sạch hơn đoạn mã ở trên vì đoạn mã này cần hiển thị cả hai hành vi.
Trong thực tế
Để sử dụng tính năng nâng cao tăng dần này trong thực tế, bạn chỉ cần sao chép đoạn mã ở trên. API này được thiết kế để hoạt động mà không cần thay đổi bắt buộc, ngay cả với mã toàn màn hình hiện có. Ví dụ: hãy xem phần PR này cho trò chơi Freeciv. Sau khi hợp nhất PR, 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.
Dấu trang 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 có thể dùng nguồn mở hoặc chấp nhận các bản vá của bạn. Bạn có thể thêm dấu trang sau đây vào thanh dấu trang rồi nhấp vào để bật chế độ toàn màn hình hiệu quả hơn.