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

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

Thomas Steiner

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

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

يتم بث Ubuntu Linux إلى علامة تبويب متصفح في macOS Chrome (لا يتم التشغيل في وضع ملء الشاشة بعد).
المشكلة: سطح المكتب البعيد الذي يتم بثه من نظام التشغيل 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() مصفوفة تضمّ رمز مفتاح واحد أو أكثر لقفلها. إذا لم يتم تقديم رموز مفاتيح، سيتم قفل جميع المفاتيح. تتوفّر قائمة بقيم رموز المفاتيح الصالحة في مواصفات قيم رمز حدث لوحة مفاتيح أحداث واجهة المستخدم.

جارٍ تسجيل جميع المفاتيح

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

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

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

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

شكر وتقدير

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