ضبط کلیدها با API قفل صفحه کلید

تجربه ای همهجانبه و تمام صفحه را برای موارد مختلف از جمله وب سایت های تعاملی، بازی ها و پخش جریانی از راه دور دسکتاپ یا برنامه ارائه دهید.

توماس اشتاینر

از آنجایی که کاربران بیشتر و بیشتری بیشتر وقت خود را در مرورگر می گذرانند، وب سایت های تعاملی غنی، بازی ها، پخش جریانی از راه دور دسکتاپ و پخش برنامه ها تلاش می کنند تا تجربه ای همه جانبه و تمام صفحه را ارائه دهند. برای انجام این کار، سایت ها در حالی که در حالت تمام صفحه هستند به کلیدهای ویژه و میانبرهای صفحه کلید نیاز دارند تا بتوان از آنها برای ناوبری، منوها یا بازی استفاده کرد. چند نمونه از کلیدهایی که ممکن است مورد نیاز باشد عبارتند از Esc , Alt + Tab , Cmd + ` و Ctrl + N .

به‌طور پیش‌فرض، این کلیدها برای برنامه وب در دسترس نیستند، زیرا توسط مرورگر یا سیستم عامل زیرین ضبط می‌شوند. API قفل صفحه‌کلید به وب‌سایت‌ها امکان می‌دهد از تمام کلیدهای موجود مجاز توسط سیستم عامل میزبان استفاده کنند (به سازگاری مرورگر مراجعه کنید).

لینوکس اوبونتو به تب مرورگر در macOS Chrome پخش شد (هنوز در حالت تمام صفحه اجرا نمی شود).
مشکل: یک دسکتاپ از راه دور لینوکس اوبونتو استریم شده در حالت تمام صفحه و بدون قفل صفحه کلید فعال اجرا نمی شود، بنابراین کلیدهای سیستم هنوز توسط سیستم عامل میزبان macOS ضبط می شوند و تجربه هنوز فراگیر نشده است.

با استفاده از Keyboard Lock API

رابط Keyboard صفحه کلید API عملکردهایی را ارائه می دهد که ضبط فشار کلید از صفحه کلید فیزیکی و همچنین دریافت اطلاعات در مورد چیدمان صفحه کلید کاربر را تغییر می دهد.

پیش نیاز

دو نوع تمام صفحه در مرورگرهای مدرن موجود است: راه اندازی شده با جاوا اسکریپت از طریق API تمام صفحه و راه اندازی شده توسط کاربر از طریق میانبر صفحه کلید. API قفل صفحه کلید تنها زمانی در دسترس است که تمام صفحه آغاز شده با جاوا اسکریپت فعال باشد. در اینجا یک نمونه از تمام صفحه آغاز شده با جاوا اسکریپت آورده شده است:

await document.documentElement.requestFullscreen();

تشخیص ویژگی

برای بررسی اینکه آیا API قفل صفحه کلید پشتیبانی می شود، می توانید از الگوی زیر استفاده کنید:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

قفل کردن صفحه کلید

متد lock() رابط Keyboard پس از فعال کردن ضبط فشار کلید برای هر یک یا همه کلیدهای صفحه کلید فیزیکی، یک وعده را برمی‌گرداند. این روش فقط می‌تواند کلیدهایی را که سیستم عامل اصلی به آن‌ها دسترسی دارد، ضبط کند. متد lock() آرایه ای از یک یا چند کد کلید را برای قفل می گیرد. اگر هیچ کد کلیدی ارائه نشود، همه کلیدها قفل خواهند شد. فهرستی از مقادیر کد کلید معتبر در تنظیمات UI Events KeyboardEvent Code Values ​​موجود است.

گرفتن همه کلیدها

مثال زیر تمام فشارهای کلید را نشان می دهد.

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() unlock تمام کلیدهای گرفته شده توسط متد lock() را باز می کند و به صورت همزمان برمی گرداند.

navigator.keyboard.unlock();

وقتی یک سند بسته می شود، مرورگر همیشه به طور ضمنی unlock() فراخوانی می کند.

نسخه ی نمایشی

می‌توانید با اجرای دمو در Glitch، API قفل صفحه کلید را آزمایش کنید. حتماً کد منبع را بررسی کنید . با کلیک بر روی دکمه Enter تمام صفحه در زیر، دمو در یک پنجره جدید راه اندازی می شود تا بتواند وارد حالت تمام صفحه شود.

ملاحظات امنیتی

یکی از نگرانی‌های این API این است که می‌توان از آن برای گرفتن همه کلیدها استفاده کرد و (در ارتباط با API تمام صفحه و PointerLock API ) از خروج کاربر از صفحه وب جلوگیری کرد. برای جلوگیری از این امر، این مشخصات از مرورگر می‌خواهد که راهی برای خروج کاربر از قفل صفحه کلید فراهم کند، حتی اگر همه کلیدها توسط API درخواست شده باشند. در کروم، این دریچه فرار یک فشار طولانی (دو ثانیه ای) کلید Esc برای خروج از قفل صفحه کلید است.

قدردانی

این مقاله توسط Joe Medley و Kayce Basques بررسی شده است. مشخصات قفل صفحه کلید توسط گری کامارکیک و جیمی والچ نوشته شده است. تصویر قهرمان توسط کن سوارز در Unsplash .