מה חדש ב-GuideEvents? מפתחות וקודים!

בגרסאות האחרונות של Chrome נוספו שני רכיבים ל-KeyboardEvents, שמשמשים כפרמטר שמוענק למערכי האירועים keydown, keypress ו-keyup. גם המאפיין code (נוסף ב-Chrome 48) וגם המאפיין key (נוסף ב-Chrome 51) מספקים למפתחים דרך פשוטה לקבל מידע שקשה לקבל באמצעות מאפיינים מדור קודם.

מאפיין הקוד

המאפיין הראשון הוא code. השדה הזה מוגדר למחרוזת שמייצגת את המקש שנלחץ כדי ליצור את KeyboardEvent, בלי להביא בחשבון את פריסת המקלדת הנוכחית (לדוגמה, QWERTY לעומת Dvorak), את האזור (לדוגמה, אנגלית לעומת צרפתית) או מקשי שינוי כלשהם. האפשרות הזו שימושית כשחשוב לכם לדעת איזה מקש פיזי נלחץ, ולא איזה תו הוא תואם. לדוגמה, אם אתם כותבים משחק, יכול להיות שתרצו להקצות קבוצה מסוימת של מקשים להזזת השחקן בכיוונים שונים, והמיפוי הזה אמור להיות עצמאי ממיקום המקשים במקלדת.

מאפיין המפתח

בשלב הבא מופיע המאפיין החדש key. הוא מוגדר גם כמחרוזת, אבל בעוד ש-code מחזיר מידע על המקש הפיזי שנלחץ, key מכיל את התו שנוצר על ידי המקש הזה, תוך התחשבות במיקום הנוכחי של המקלדת, במקשות השינוי ובשפה. כדאי לעיין בערך של המאפיין key כשרוצים לדעת איזה תו יוצג במסך כאילו המשתמש הקליד אותו בתיבת טקסט.

מה המשמעות של זה בפועל?

כדי להמחיש את העניין, נניח שהמשתמש משתמש במקלדת בארה"ב עם פריסת QWERTY. לחיצה על המקש Q במקלדת הזו תיצור KeyboardEvent עם מאפיין code שמוגדר כ-"KeyQ". זה נכון ללא קשר לפריסה של המקלדת וללא קשר למקשי צירוף אחרים. לשם השוואה, במקלדת צרפתית (AZERTY) המקש הזה עדיין יהיה code של "KeyQ", למרות שהאות המודפסת על מקש המקלדת היא 'a'. הקשה על המקש הפיזי Q באותה מקלדת בארה"ב תיצור בדרך כלל את התו KeyboardEvent עם key מוגדר כ-"q" (ללא מקשי שינוי), או כ-"Q" (עם Shift או CapsLock), או כ-"œ" (ב-OS X, עם Alt). במקלדת AZERTY בצרפתית, אותו מקש יוצר את האות 'a' (או 'A' עם Shift או CapsLock). בפריסת מקלדות אחרות, הערך של key יכול להיות "й",‏ "ض",‏ "ㅂ",‏ "た" או תו אחר. נחזור לדוגמה של המשחק שציינו קודם. אם רוצים שהמשחק ישתמש במקשים WASD לתנועה, אפשר להשתמש במאפיין code ולבדוק אם נלחצו המקשים "KeyW",‏ "KeyA",‏ "KeyS" ו-"KeyD". הפעולה הזו תפעל בכל המקלדות ובכל הפריסות – גם במקלדות AZERTY שבהן המיקום של המקש 'w' והמקש 'z' מוחלף.

מקלדות וירטואליות

עד עכשיו התמקדנו בהתנהגות בהנחה שיש מקלדת פיזית. מה קורה למשתמשים שמקלידים במקלדת וירטואלית או במכשיר קלט חלופי? במפרט מפורטות הנחיות רשמיות לגבי המאפיין code. לסיכום, מקלדת וירטואלית שמחקה את הפריסה של מקלדת רגילה אמורה להוביל להגדרה של מאפיין code מתאים, אבל מקלדות וירטואליות שמשתמשות בפריסות לא מסורתיות עשויות לגרום לכך שהמאפיין code לא יוגדר בכלל.

המצב פשוט יותר לגבי המאפיין key, שצפוי להיות מוגדר למחרוזת על סמך התווית שהמשתמש הקליד (באופן וירטואלי).

רוצה לנסות?

Gary Kačmarčík הכין הדגמה נהדרת להצגה חזותית של כל המאפיינים שמשויכים ל-KeyboardEvent:

מאפייני KeyboardEvent

תמיכה בדפדפנים שונים

נכון למועד כתיבת המאמר, התמיכה במאפיין code מוגבלת ל-Chrome בגרסה 48 ומעלה, ל-Opera בגרסה 35 ומעלה ול-Firefox בגרסה 44 ומעלה. התמיכה במאפיין key קיימת ב-Firefox בגרסה 44 ומעלה, ב-Chrome בגרסה 51 ומעלה וב-Opera בגרסה 38 ומעלה, ויש תמיכה חלקית ב-Internet Explorer בגרסה 9 ומעלה וב-Edge בגרסה 13 ומעלה.