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

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

Thomas Steiner

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

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

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

استخدام واجهة برمجة تطبيقات قفل لوحة المفاتيح

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

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

هناك نوعان من وضع ملء الشاشة متاح في المتصفحات الحديثة: يتم بدء تشغيل جافا سكريبت عبر واجهة برمجة تطبيقات ملء الشاشة وتشغيل المستخدم من خلال اختصار لوحة مفاتيح. لا تتوفّر واجهة برمجة تطبيقات قفل لوحة المفاتيح إلا عندما يكون ملء الشاشة الذي يتم تشغيله تلقائيًا باستخدام JavaScript مفعَّلاً. في ما يلي مثال على وضع ملء الشاشة الذي يتم تشغيله تلقائيًا باستخدام JavaScript:

await document.documentElement.requestFullscreen();

رصد الميزات

يمكنك استخدام النمط التالي للتحقّق مما إذا كانت واجهة برمجة التطبيقات Board 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().

عرض توضيحي

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

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

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

شكر وتقدير

تمت مراجعة هذه المقالة من قِبل جو ميديلي وكايس باسك. تم تأليف مواصفات قفل لوحة المفاتيح بواسطة Gary Kacmarcik وJamie Walch. صورة رئيسية من تصميم كين سواريز على Unسباش