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