التقاط المفاتيح باستخدام Keyboard Lock API

توفير تجربة غامرة بملء الشاشة لمجموعة متنوعة من حالات الاستخدام، بما في ذلك المواقع الإلكترونية والألعاب التفاعلية وبث التطبيقات أو سطح المكتب البعيد

Thomas Steiner

مع زيادة عدد المستخدمين الذين يقضون معظم وقتهم في المتصفّح، تسعى المواقع الإلكترونية والألعاب وعمليات بث سطح المكتب البعيد وبث التطبيقات إلى توفير تجربة شاملة بملء الشاشة. ولتحقيق ذلك، تحتاج المواقع الإلكترونية إلى الوصول إلى مفاتيح خاصة واختصارات لوحة المفاتيح أثناء استخدام وضع ملء الشاشة، حتى يمكن استخدامها للتنقّل أو الوصول إلى القوائم أو تشغيل الألعاب. تشمل بعض الأمثلة على المفاتيح التي قد تكون مطلوبة Esc وAlt + Tab وCmd + ` وCtrl + N.

بشكل افتراضي، لا تتوفر هذه المفاتيح لتطبيق الويب نظرًا لأنها تلتقطها المتصفح أو نظام التشغيل الأساسي. تمكّن واجهة برمجة التطبيقات لقفل لوحة المفاتيح المواقع الإلكترونية من استخدام جميع المفاتيح المتاحة التي يسمح بها نظام التشغيل المضيف (اطّلع على توافق المتصفح).

يتم بث نظام التشغيل Ubuntu Linux إلى علامة تبويب المتصفح في Chrome على نظام التشغيل macOS (لا يعمل في وضع ملء الشاشة بعد).
المشكلة: تم بث كمبيوتر مكتبي عن بُعد يعمل بنظام التشغيل Ubuntu Linux بدون تشغيله في وضع ملء الشاشة وبدون قفل لوحة المفاتيح النشطة، وبالتالي لا يزال نظام التشغيل المضيف macOS يُسجّل مفاتيح النظام، ولا تزال التجربة غير غامرة.

استخدام Keyboard Lock API

توفّر واجهة Keyboard لواجهة برمجة التطبيقات Keyboard API وظائف تتيح تفعيل أو إيقاف تسجيل الضغط على المفاتيح من لوحة المفاتيح الفعلية، بالإضافة إلى الحصول على معلومات عن مخطط لوحة المفاتيح لدى المستخدم.

المتطلبات الأساسية

هناك نوعان من وضع ملء الشاشة متاح في المتصفحات الحديثة: يتم بدء تشغيل JavaScript عبر واجهة برمجة تطبيقات ملء الشاشة وتشغيل المستخدم من خلال اختصار لوحة مفاتيح. لا تتوفّر واجهة برمجة تطبيقات قفل لوحة المفاتيح إلا عندما يكون ملء الشاشة الذي يتم تشغيله تلقائيًا باستخدام JavaScript مفعَّلاً. في ما يلي مثال على شاشة ملء الشاشة التي تبدأ من JavaScript:

await document.documentElement.requestFullscreen();

رصد الميزات

يمكنك استخدام النمط التالي للتحقّق مما إذا كانت واجهة برمجة التطبيقات Keyboard Lock API متوافقة:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

قفل لوحة المفاتيح

تُعرِض طريقة lock() لواجهة Keyboard وعدًا بعد تفعيل تسجيل الضغط على أي مفاتيح أو كل المفاتيح على لوحة المفاتيح الفعلية. ولا يمكن لهذه الطريقة التقاط سوى المفاتيح التي تم منحها إذن الوصول من خلال نظام التشغيل الأساسي. تأخذ طريقة lock() صفيفًا من رمز مفتاح واحد أو أكثر للقفل. في حال عدم تقديم رموز مفاتيح، سيتم قفل جميع المفاتيح. تتوفّر قائمة بقيم رموز المفاتيح الصالحة في مواصفات قيم رموز KeyboardEvent لأحداث واجهة المستخدم.

جارٍ التقاط جميع المفاتيح

يسجِّل المثال التالي جميع عمليات الضغط على المفاتيح.

navigator.keyboard.lock();

تسجيل مفاتيح معيّنة

يرصد المثال التالي مفاتيح W وA وS وD. ويتم تسجيل هذه المفاتيح بغض النظر عن مفاتيح التعديل المستخدَمة مع الضغط على المفتاح. بافتراض استخدام تنسيق QWERTY في الولايات المتحدة، يؤدّي تسجيل "KeyW" إلى إرسال W وShift + W وControl + W وControl + Shift + W وجميع مجموعات مفاتيح التعديل الأخرى التي تحتوي على W إلى التطبيق. وينطبق الأمر نفسه على "KeyA" و"KeyS" و"KeyD".

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

يمكنك الردّ على ضغطات المفاتيح التي تم تسجيلها باستخدام أحداث لوحة المفاتيح. على سبيل المثال، يستخدم هذا الرمز حدث onkeydown:

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

فتح قفل لوحة المفاتيح

تُفحِّل طريقة unlock() جميع المفاتيح التي تم رصدها من خلال طريقة lock() وتُعيدها بشكل متزامن.

navigator.keyboard.unlock();

عند إغلاق مستند، يستدعي المتصفّح unlock() بشكل ضمني دائمًا.

عرض توضيحي

يمكنك اختبار واجهة برمجة تطبيقات Board Lock API من خلال تشغيل العرض التوضيحي على تطبيق Glitch. تأكّد من الاطّلاع على رمز المصدر. يؤدي النقر على زر "دخول وضع ملء الشاشة" أدناه إلى تشغيل العرض الترويجي في نافذة جديدة حتى يتمكّن من الدخول إلى وضع ملء الشاشة.

اعتبارات الأمان

من المخاوف بشأن واجهة برمجة التطبيقات هذه أنّه يمكن استخدامها للاستيلاء على جميع المفاتيح (بالاشتراك مع Fullscreen API وPointerLock API) ومنع المستخدم من الخروج من صفحة الويب. لمنع حدوث ذلك، تتطلّب المواصفات أن يوفّر المتصفّح طريقة للمستخدم للخروج من قفل لوحة المفاتيح حتى إذا طلبت واجهة برمجة التطبيقات جميع المفاتيح. في Chrome، يتم استخدام مفتاح Esc للخروج من قفل لوحة المفاتيح، وذلك من خلال الضغط عليه مع الاستمرار لمدة ثانيتَين.

الشكر والتقدير

تمت مراجعة هذه المقالة من قِبل جو ميديلي وكايس باسك. تم إنشاء مواصفات قفل لوحة المفاتيح من قِبل غاري كاكمارسيك وجايمي وولش. الصورة الرئيسية تقدّمها Ken Suarez على Unsplash.