ارائه تجربه فراگیر و تمام‌صفحه برای انواع موارد استفاده، ازجمله وب‌سایت‌های تعاملی، بازی‌ها، و جاری‌سازی برنامه یا رایانه از دور.
با افزایش تعداد کاربرانی که بیشتر وقت خود را در مرورگر می‌گذرانند، وب‌سایت‌های تعاملی غنی، بازی‌ها، جاری‌سازی از راه دور رایانه، و جاری‌سازی برنامه تلاش می‌کنند تا تجربه‌ای فراگیر و تمام‌صفحه ارائه دهند. برای انجام این کار، سایت‌ها باید در حالت تمام‌صفحه به کلیدهای ویژه و میان‌برهای صفحه‌کلید دسترسی داشته باشند تا بتوانند از آن‌ها برای پیمایش، منوها، یا بازی استفاده کنند. برخی‌از نمونه‌های کلیدهایی که ممکن است لازم باشد عبارتند از Esc، Alt + Tab، Cmd + `، و Ctrl + N.
به‌طور پیش‌فرض، این کلیدها برای برنامه وب دردسترس نیستند زیرا توسط مرورگر یا سیستم‌عامل زیربنایی ضبط می‌شوند. Keyboard Lock API به وب‌سایت‌ها امکان می‌دهد از همه کلیدهای دردسترس که سیستم‌عامل میزبان مجاز کرده است استفاده کنند (به سازگاری مرورگر مراجعه کنید).
استفاده از Keyboard Lock API
میانای Keyboard در Keyboard API توابعی را ارائه می‌دهد که ضبط فشردن کلیدها در صفحه‌کلید فیزیکی را فعال/غیرفعال می‌کند و همچنین اطلاعاتی درباره جانمایی صفحه‌کلید کاربر ارائه می‌دهد.
پیش‌نیاز
دو نوع تمام‌صفحه در مرورگرهای نو دردسترس است: تمام‌صفحه با شروع جاوا اسکریپت ازطریق Fullscreen API و تمام‌صفحه با شروع کاربر ازطریق میان‌بر صفحه‌کلید. Keyboard Lock API فقط زمانی دردسترس است که تمام‌صفحه آغازشده با جاوا اسکریپت فعال باشد. در اینجا نمونه‌ای از تمام‌صفحه آغازشده با جاوا اسکریپت آورده شده است:
await document.documentElement.requestFullscreen();
تشخیص ویژگی
می‌توانید از الگوی زیر برای بررسی اینکه آیا Keyboard Lock 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() قفل همه کلیدهای ضبط‌شده توسط روش lock() را باز می‌کند و به‌صورت همگام برمی‌گردد.
navigator.keyboard.unlock();
وقتی سندی بسته می‌شود، مرورگر همیشه به‌طور ضمنی unlock() را فراخوانی می‌کند.
پخش نمایشی
می‌توانید Keyboard Lock API را با اجرای این نسخه نمایشی آزمایش کنید. حتماً کد منبع را بررسی کنید. با کلیک کردن روی دکمه «ورود به حالت تمام‌صفحه» در زیر، نسخه نمایشی در پنجره جدیدی راه‌اندازی می‌شود تا بتواند وارد حالت تمام‌صفحه شود.
ملاحظات امنیتی
یکی از نگرانی‌ها درباره این میانای برنامه‌سازی کاربردی این است که می‌توان از آن برای گرفتن همه کلیدها و (در ارتباط با میانای برنامه‌سازی کاربردی تمام‌صفحه و میانای برنامه‌سازی کاربردی PointerLock) جلوگیری از خروج کاربر از صفحه وب استفاده کرد. برای جلوگیری از این امر، مشخصات از مرورگر می‌خواهد روشی را برای کاربر فراهم کند تا بتواند از قفل صفحه‌کلید خارج شود، حتی اگر همه کلیدها توسط میانای برنامه‌سازی کاربردی درخواست شده باشد. در Chrome، این راه فرار عبارت است از فشار دادن طولانی (دو ثانیه) کلید Esc برای راه‌اندازی خروج از «قفل صفحه‌کلید».
پیوندهای مفید
- پیش‌نویس مشخصات
- مخزن GitHub
- ورودی ChromeStatus
- اشکال ردیابی Chrome
- کدهای کلید برای صفحه‌کلیدهای استاندارد
تصدیق‌ها
این مقاله را جو مدلی و کیس بسک بازبینی کرده‌اند. مشخصات «قفل صفحه‌کلید» توسط گری کاکمارسیک و جیمی والش نوشته شده است.