از API قفل صفحه کلید برای گرفتن کلید Escape در حالت تمام صفحه استفاده کنید.
اگر تا به حال یک بازی وب تمام صفحه را انجام داده اید که یک گفتگوی درون بازی ظاهر می شود که به طور غریزی آن را با کلید Escape لغو کرده اید، احتمالاً متوجه شده اید که از حالت تمام صفحه خارج شده اید. این تجربه خسته کننده به دلیل این واقعیت است که حالت گفتگو و تمام صفحه برای کلید Escape "جنگ" می کنند. این یک نبرد نابرابر است زیرا به طور پیش فرض حالت تمام صفحه همیشه برنده است. اما چگونه می توانید دیالوگ را برنده کلید Escape کنید؟ اینجاست که Keyboard Lock API وارد عمل می شود.
پشتیبانی از مرورگر
با استفاده از Keyboard Lock API
Keyboard Lock API در navigator.keyboard. متد lock() رابط Keyboard پس از فعال کردن ضبط کلیدها برای هر یک یا همه کلیدهای صفحه کلید فیزیکی، یک وعده را برمی‌گرداند. این روش فقط می‌تواند کلیدهایی را که سیستم عامل اصلی به آن‌ها دسترسی دارد، ضبط کند. خوشبختانه کلید Escape یکی از آنهاست.
اگر برنامه شما حالت تمام صفحه دارد، از API قفل صفحه کلید به عنوان یک پیشرفت پیشرونده با گرفتن کلید Escape هنگام درخواست تمام صفحه استفاده کنید. هنگام خروج از حالت تمام صفحه از طریق روش unlock() رابط 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.');
});
}
این بدان معنی است که وقتی کاربر در حالت تمام صفحه است، با فشار دادن Escape ، گفتگوی پیش فرض لغو می شود. اگر کاربر کلید Escape را فشار داده و نگه دارد ، همچنان می تواند از حالت تمام صفحه خارج شود. بهترین از هر دو جهان.
نسخه ی نمایشی
شما می‌توانید هر دو نوع پیش‌فرض و نسخه‌های پیشرفته‌شده را در نسخه آزمایشی آزمایش کنید. کد منبع نسخه آزمایشی نسبت به قطعه بالا تمیزتر است، زیرا باید هر دو رفتار را نشان دهد.
در عمل
برای استفاده از این بهبود پیشرونده در عمل، فقط قطعه بالا را کپی کنید. این برنامه به گونه ای طراحی شده است که بدون تغییر مورد نیاز، حتی با کد تمام صفحه موجود، کار کند. به عنوان نمونه این روابط عمومی را برای بازی Freeciv ببینید. پس از ادغام روابط عمومی، می‌توانید با فشار دادن Escape، تمام گفتگوهای درون بازی را لغو کنید.
یک نشانک جایزه
همه برنامه‌ها یا بازی‌هایی که از حالت تمام صفحه پشتیبانی می‌کنند منبع باز نیستند یا وصله‌های شما را نمی‌پذیرند، نشانک زیر را می‌توان به نوار نشانک‌های شما اضافه کرد و روی آن کلیک کرد تا حالت تمام صفحه بهتر فعال شود.