אות רישית אוטומטית לנייד

זה אולי ייראה כמו התכונה הכי פחות מרשימה שקיימת, אבל אני חושב שזה חשוב כי כולם לא אוהבים להקליד בנייד: אתם שונא את זה, אני לא אוהב את זה. ב-Chrome ל-Android (לפני Chrome 43 – בטא החל מאפריל 2015), למפתח יש מעט שליטה על האופן שבו הוא יכול לעזור למשתמש להזין טקסט. אם אתה מקליד היום במכשיר, הוא עשוי להיראות כך:

שימו לב שהכל מופיע באותיות קטנות מלבד ערכים מסוימים שמערכת Android זיהתה בתור שם.

Apple הוסיפה מאפיין ב-HTMLInputElement וב-HTMLTextAreaElement שנקרא auto למעקב ב-iOS 5, והוא מאפשר למחבר הדף לרמוז על האופן שבו הדפדפן צריך להציג את המקלדת הווירטואלית כדי שהמשתמש יבצע אופטימיזציה להזנת טקסט. בצורה הפשוטה ביותר, אפשר לציין שתיבת טקסט צריכה להיות אות רישית ראשונה בכל משפט חדש באופן אוטומטי.

החל מגרסה 43 של Chrome, Chrome יתמוך במאפיין אותיות רישיות באופן אוטומטי ב-HTMLInputElement וב-HTMLTextAreaElement, וכך אפשר לשלוט בהתנהגות של השימוש באותיות רישיות במקלדת הווירטואלית ולהצמיד אותה לשורה עם Safari ב-iOS.

שימוש באותיות רישיות באופן אוטומטי יחול רק על HTMLInputElements שבהם המאפיין type מוגדר כ: type="text", type="search", type="url", type="tel", type="email" או type="password". ברירת המחדל היא לא להשתמש באותיות רישיות באופן אוטומטי.

הנה דוגמה פשוטה שמאפשרת להגדיר אותיות רישיות באופן אוטומטי למשפטים באזור טקסט:

<textarea autocapitalize="sentences">

מהם הערכים שאפשר להזין באותיות רישיות באופן אוטומטי?

בטבלה הבאה מוצגים המצבים השונים שבהם יכול להיות רכיב קלט:

ארץ מילות מפתח
<input>
<input autocapitalize=off>
ללא שימוש באותיות רישיות ללא [ברירת מחדל]
מושבתת
<input autocapitalize=characters> שימוש באותיות רישיות בתווים תווים
<input autocapitalize=words> שימוש באותיות רישיות במילים מילים
<input autocapitalize=sentences> שימוש באותיות רישיות במשפטים משפטים

עבור HTMLInputElement, ברירת המחדל של הערך הלא חוקי היא שימוש באותיות רישיות במשפטים אם סוג הרכיב הוא type=text או type=search. אחרת, הערך הוא ללא שימוש באותיות רישיות.

  • <input autocapitalize="simon"> יהיה שדה טקסט עם שימוש באותיות רישיות במשפטים
  • <input type="email" autocapitalize="simon"> יהיה שדה טקסט עם ללא שימוש באותיות רישיות.
  • <input> יהיה שדה טקסט עם ללא שימוש באותיות רישיות.

ב-HTMLTextAreaElement, ברירת המחדל של הערך הלא חוקי היא שימוש באותיות רישיות במשפטים. זהו שינוי מהתנהגות ברירת המחדל.

  • <textarea autocapitalize="terry"></textarea> יהיה אזור טקסט עם שימוש באותיות רישיות במשפטים
  • <textarea></textarea> יהיה אזור טקסט עם שימוש באותיות רישיות במשפט.
  • <textarea autocapitalize="none"></textarea> יהיה אזור טקסט שבו ללא שימוש באותיות רישיות.

החלטנו לא להטמיע את המאפיין HTMLFormElement כי כיום גילינו שהוא כמעט לא בשימוש בדפים, וכשנעשה בו שימוש, הוא משמש בעיקר להשבתה מוחלטת של השימוש באותיות רישיות בטופס:

<form autocapitalize=off><input></form>

המצב שלמעלה הוא אי-זוגי, כי מצב ברירת המחדל של HTMLInputElement הוא ללא שימוש באותיות רישיות.

למה בחרת להשתמש באפשרות הזו יותר מ-inputmode?

inputmode נועד לפתור את אותו סוג של בעיה, בין היתר. עם זאת, חסרות הטמעות של דפדפנים – למיטב ידיעתנו, יש הטמעה רק למערכת ההפעלה Firefox עם קידומת (x-inputmode) – אבל השימוש בה באינטרנט קטן מאוד. מצד שני, autocapitalize נמצא בשימוש במיליוני דפים ובמאות אלפי אתרים כבר.

מתי כדאי להשתמש בחשבון כזה?

זו לא רשימה מלאה של המקרים שבהם כדאי להשתמש ב-autocapitalize. עם זאת, יש כמה מקומות שבהם כדאי מאוד לעזור למשתמש להזין טקסט:

  • השתמשו ב-autocapitalization=words אם:
    • שמות של אנשים צפויים (הערה: לא כל השמות תואמים לכלל הזה, אבל רוב השמות המערביים יופיעו באותיות רישיות באופן אוטומטי כמצופה)
    • שמות חברה
    • כתובות
  • כדאי להשתמש בפונקציה autocapitalization=characters אם מצפים:
    • מדינות בארה"ב
    • מספרי מיקוד בבריטניה
  • השתמשו ב-sentences כרכיבי קלט אם אתם מצפים לתוכן שמוזן בצורת פסקה רגילה – למשל, בפוסט בבלוג.
  • צריך להשתמש בפרמטר none ב-TextAreas אם מצפים לתוכן שלא אמור להיות מושפע. למשל, מזינים קוד.
  • אם לא רוצים לקבל רמז, אין להוסיף אותיות רישיות באופן אוטומטי.