לספק חוויה immersive במסך מלא למגוון תרחישים לדוגמה, אתרים אינטראקטיביים, משחקים וסטרימינג של אפליקציות או של מחשבים מרוחקים.
יותר ויותר משתמשים מבלים את רוב הזמן בדפדפן, ולכן אתרים אינטראקטיביים עשירים, משחקים, סטרימינג של מחשבים מרוחקים וסטרימינג של אפליקציות שואפים לספק חוויה מרתקת במסך מלא. כדי לעשות זאת, לאתרים צריכה להיות גישה למפתחות מיוחדים ולמקשי קיצור במצב מסך מלא, כדי שאפשר יהיה להשתמש בהם לניווט, לתפריטים או למשחקים. דוגמאות למפתחות שעשויים להידרש: Esc, Alt + Tab, Cmd + ` ו-Ctrl + N.
כברירת מחדל, המפתחות האלה לא זמינים לאפליקציית האינטרנט כי הם מתועדים על ידי הדפדפן או מערכת ההפעלה הבסיסית. Keyboard Lock API מאפשר לאתרים להשתמש בכל המפתחות הזמינים שמותר להשתמש בהם במערכת ההפעלה המארחת (ראו תאימות לדפדפנים).
שימוש ב-Keyboard Lock API
הממשק Keyboard של Keyboard API מספק פונקציות שמאפשרות להפעיל או להשבית את הצילום של לחיצות על מקשים מהמקלדת הפיזית, וגם לקבל מידע על פריסת המקלדת של המשתמש.
דרישות מוקדמות
יש שני סוגים של מסך מלא שזמינים בדפדפנים מודרניים: מסך מלא שמופעל על ידי JavaScript דרך Fullscreen API ומסך מלא שמופעל על ידי המשתמש באמצעות מקש קיצור. ממשק ה-Keyboard Lock API זמין רק כשהאפשרות מסך מלא ביוזמת JavaScript פעילה. דוגמה למסך מלא שהופעל על ידי JavaScript:
await document.documentElement.requestFullscreen();
זיהוי תכונות
אפשר להשתמש בתבנית הבאה כדי לבדוק אם יש תמיכה ב-Keyboard Lock API:
if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
// Supported!
}
נעילה של המקלדת
השיטה lock() בממשק Keyboard מחזירה הבטחה אחרי הפעלת הצילום של הקשות על כל המקשים או על חלק מהם במקלדת הפיזית. השיטה הזו יכולה לתעד רק מפתחות שקיבלו הרשאת גישה ממערכת ההפעלה הבסיסית. השיטה lock() מקבלת מערך של קוד מפתח אחד או יותר לנעילה. אם לא יסופקו קודי מפתח, כל המפתחות יהיו נעולים. רשימה של ערכים חוקיים של קודי מפתח זמינה במפרט ערכים של קודי אירועי UI 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().
הדגמה (דמו)
כדי לבדוק את Keyboard Lock API, אפשר להריץ את הדמו ב-Glitch. חשוב לבדוק את קוד המקור. לחיצה על הלחצן 'מעבר למסך מלא' שבהמשך תפעיל את הדמו בחלון חדש כדי שיוכל לעבור למצב מסך מלא.
שיקולי אבטחה
אחת מהבעיות בממשק ה-API הזה היא שאפשר להשתמש בו כדי לקבל גישה לכל המפתחות, וכך (בשילוב עם Fullscreen API ו-PointerLock API) למנוע מהמשתמש לצאת מדף האינטרנט. כדי למנוע זאת, במפרט נדרש שהדפדפן יספק למשתמש דרך לצאת מנעילה של המקלדת גם אם כל המפתחות נדרשים על ידי ה-API. ב-Chrome, פתח המילוט הזה הוא לחיצה ארוכה (שתי שניות) על מקש Esc כדי להפעיל יציאה מהנעילה של המקלדת.
קישורים שימושיים
תודות
המאמר הזה נבדק על ידי Joe Medley ו-Kayce Basques. Gary Kacmarcik ו-Jamie Walch הם מחברי המפרט של נעילת המקלדת. תמונה ראשית (Hero) של Ken Suarez ב-Unsplash.