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

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

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

الإقرارات

راجَع هذه المقالة جو ميدلي وكايسي باسكس. تمت كتابة مواصفات Keyboard Lock بواسطة غاري كاتشمارسيك وجيمي والش.