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