التقاط المفاتيح باستخدام 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 لواجهة برمجة التطبيقات Keyboard API وظائف تتيح تفعيل أو إيقاف تسجيل الضغط على المفاتيح من لوحة المفاتيح الفعلية، بالإضافة إلى الحصول على معلومات عن مخطط لوحة المفاتيح لدى المستخدم.

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

يتوفّر نوعان من وضع ملء الشاشة في المتصفّحات الحديثة: وضع ملء الشاشة الذي يبدأ من 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 من خلال تشغيل الإصدار التجريبي على Glitch. احرص على الاطّلاع على رمز المصدر. يؤدي النقر على زر "دخول وضع ملء الشاشة" أدناه إلى تشغيل العرض الترويجي في نافذة جديدة حتى يتمكّن من الدخول إلى وضع ملء الشاشة.

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

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

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

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