وضع ملء الشاشة أفضل باستخدام Keyboard Lock API

استخدِم Keyboard Lock API لالتقاط مفتاح Escape في وضع ملء الشاشة.

Thomas Steiner

إذا سبق لك أن لعبت لعبة ويب بملء الشاشة وظهر لك مربّع حوار داخل اللعبة ألغيته تلقائيًا باستخدام مفتاح Escape، من المحتمل أنّك خرجت من وضع ملء الشاشة. تحدث هذه المشكلة المزعجة لأنّ مربّع الحوار ووضع ملء الشاشة "يتنافسان" على مفتاح Escape. إنّها معركة غير متكافئة لأنّ وضع ملء الشاشة يتفوّق دائمًا على غيره. ولكن كيف يمكنك جعل مربّع الحوار هو الفائز عند الضغط على مفتاح Escape؟ وهنا يأتي دور Keyboard Lock API.

دعم المتصفح

استخدام Keyboard Lock API

تتوفّر Keyboard Lock API في الطريقة navigator.keyboard. The lock() لواجهة Keyboard التي تعرض وعدًا بعد تفعيل إمكانية تسجيل ضغطات المفاتيح لأي مفتاح أو جميع المفاتيح على لوحة المفاتيح المادية. لا يمكن لهذه الطريقة التقاط المفاتيح التي يمنحها نظام التشغيل الأساسي إذن الوصول. لحسن الحظ، مفتاح Escape هو أحد هذه المفاتيح.

إذا كان تطبيقك يتضمّن وضع ملء الشاشة، استخدِم Keyboard Lock 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.

تطبيق مختصر إضافي

لن تكون جميع التطبيقات أو الألعاب التي تتوافق مع وضع ملء الشاشة مفتوحة المصدر أو تقبل تصحيحاتك، ولكن يمكن إضافة أداة الإشارات المرجعية التالية إلى شريط الإشارات المرجعية والنقر عليها لتفعيل وضع ملء الشاشة بشكل أفضل.