حالت تمام صفحه بهتر با API قفل صفحه کلید

از API قفل صفحه کلید برای گرفتن کلید Escape در حالت تمام صفحه استفاده کنید.

Thomas Steiner

اگر تا به حال یک بازی وب تمام صفحه را انجام داده اید که یک گفتگوی درون بازی ظاهر می شود که به طور غریزی آن را با کلید Escape لغو کرده اید، احتمالاً متوجه شده اید که از حالت تمام صفحه خارج شده اید. این تجربه خسته کننده به دلیل این واقعیت است که حالت گفتگو و تمام صفحه برای کلید Escape "جنگ" می کنند. این یک نبرد نابرابر است زیرا به طور پیش فرض حالت تمام صفحه همیشه برنده است. اما چگونه می توانید دیالوگ را برنده کلید Escape کنید؟ اینجاست که Keyboard Lock API وارد عمل می شود.

پشتیبانی از مرورگر

از 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 ، تمام گفتگوهای درون بازی را لغو کنید.

یک نشانک جایزه

همه برنامه‌ها یا بازی‌هایی که از حالت تمام صفحه پشتیبانی می‌کنند منبع باز نیستند یا وصله‌های شما را نمی‌پذیرند، نشانک زیر را می‌توان به نوار نشانک‌های شما اضافه کرد و برای فعال کردن حالت تمام صفحه بهتر روی آن کلیک کرد.