استخدِم واجهة برمجة تطبيقات قفل لوحة المفاتيح لالتقاط مفتاح Escape في وضع ملء الشاشة.
إذا سبق لك أن لعبت لعبة ويب بملء الشاشة أظهرت مربع حوار داخل اللعبة تم إلغاؤه غريزيًا باستخدام مفتاح Escape، فمن المحتمل أنك وجدت من الممكن الخروج من وضع ملء الشاشة. ترجع هذه التجربة المزعجة إلى أنّ مربّع الحوار ووضع ملء الشاشة "يتنافسان" على مفتاح Escape. إنها معركة غير متساوية لأن وضع ملء الشاشة يفوز دائمًا بشكل افتراضي. ولكن كيف يمكنك جعل مربع الحوار هو الفائز عن مفتاح Escape؟ وهنا يأتي دور واجهة برمجة تطبيقات قفل لوحة المفاتيح.
المتصفحات المتوافقة
استخدام واجهة برمجة تطبيقات قفل لوحة المفاتيح
تتوفّر واجهة Table Lock API على navigator.keyboard.. وتفي الطريقة lock() في واجهة Keyboard بخطأ بعد تفعيل التقاط ضغطات المفاتيح على أي من المفاتيح على لوحة المفاتيح الخارجية أو جميعها. يمكن لهذه الطريقة التقاط المفاتيح التي
منحها نظام التشغيل الأساسي إمكانية الوصول. لحسن الحظ، مفتاح Escape هو أحد هذه الخيارات.
إذا كان تطبيقك في وضع ملء الشاشة، استخدِم واجهة برمجة التطبيقات لوحة المفاتيح 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، سيظل بإمكانه الخروج من وضع ملء الشاشة. أفضل ما في الأمرين.
عرض توضيحي
يمكنك اختبار كل من خيارات المنتج التلقائية والمحسَّنة بشكل تدريجي في الإصدار التجريبي. إنّ رمز المصدر الخاص بالعرض التوضيحي أقل نظافة من المقتطف من قبل، لأنّه يجب إظهار كلا السلوكَين.
على أرض الواقع
ولاستخدام هذا التحسين التدريجي عمليًا، ما عليك سوى نسخ المقتطف السابق. وهو مصمم للعمل بدون إجراء تغييرات، حتى مع استخدام رمز ملء الشاشة الحالي. يمكنك الاطّلاع على PR للعبة Freeciv على سبيل المثال. بعد دمج PR، يمكنك إلغاء جميع مربعات الحوار داخل اللعبة من خلال الضغط على Escape.
تطبيق مختصر إضافي
لن تكون جميع التطبيقات أو الألعاب التي تتيح وضع ملء الشاشة مفتوحة المصدر أو تقبل رموز التصحيح، إذ يمكن إضافة المرجع التالي إلى شريط الإشارات والنقر عليه لتفعيل وضع أفضل بملء الشاشة.