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

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

Thomas Steiner

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

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

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

استخدام Keyboard Lock API

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

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

يتوفّر نوعان من وضع ملء الشاشة في المتصفّحات الحديثة: النوع الأول يتم تفعيله باستخدام JavaScript من خلال Fullscreen API، والنوع الثاني يتم تفعيله من قِبل المستخدم باستخدام اختصار لوحة المفاتيح. لا تتوفّر واجهة برمجة التطبيقات Keyboard Lock API إلا عندما يكون وضع ملء الشاشة الذي يتم تفعيله باستخدام 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() ضمنيًا.

عرض توضيحي

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

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

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

الإقرارات

راجع هذه المقالة جو ميدلي وكايس باسكس. تمت كتابة مواصفات "قفل لوحة المفاتيح" بواسطة غاري كاسمارسيك وجيمي والش. الصورة الرئيسية من كين سواريز على Unsplash