Sử dụng API Khoá bàn phím để chụp phím Escape ở chế độ toàn màn hình.
Nếu từng chơi một trò chơi trên web ở chế độ toàn màn hình làm bật lên một hộp thoại trong trò chơi mà bạn đã huỷ theo bản năng bằng phím Escape, thì có thể bạn sẽ 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 chế độ hộp thoại và chế độ toàn màn hình "chiến" với phím Escape. Đây là một trận 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 trở thành hộp thoại 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 trả về một hứa hẹn 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ể thu thập 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 làm 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á (nghĩa là không chụp nữa) bàn phím khi thoát 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, thì họ vẫn có thể thoát khỏi chế độ toàn màn hình. Những điều tốt 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ể nâng cao tăng dần trong bản minh hoạ. Mã nguồn của bản minh hoạ kém sạch hơn so với đoạn mã trước đó vì đoạn mã này cần cho thấy 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ước đó. Thư viện này được thiết kế để hoạt động mà không cần thay đổi gì, ngay cả với mã toàn màn hình hiện có. Ở ví dụ, hãy xem PR 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 Escape.
Một dấu trang bổ sung
Không phải tất cả các ứng dụng hoặc trò chơi hỗ trợ chế độ toàn màn hình sẽ là nguồn mở hoặc chấp nhận bản vá của bạn. Bạn có thể thêm dấu trang sau đây vào thanh dấu trang và nhấp vào để bật chế độ toàn màn hình hiệu quả hơn.