יכול להיות שהתכונה הזו נראית כמו התכונה הכי לא מרשימה בעולם, אבל לדעתי היא חשובה כי כולם שונאים להקליד בנייד: אתם שונאים את זה, ואני מתעבת את זה. ב-Chrome ל-Android (לפני Chrome 43 – גרסה בטא נכון לאפריל 2015), למפתחים יש שליטה מועטה על האופן שבו הדפדפן יכול לעזור למשתמש להזין טקסט. אם מקלידים במכשיר היום, זה עשוי להיראות כך:
שימו לב שכל הערכים הם באותיות קטנות, מלבד ערכים מסוימים שמערכת Android זיהתה כשם.
Apple הציגה מאפיין ב-HTMLInputElement וב-HTMLTextAreaElement שנקרא autocapitalize ב-iOS 5, ומאפשר לכותב הדף להציע איך הדפדפן צריך להציג את המקלדת הווירטואלית למשתמש כדי לבצע אופטימיזציה של הזנת הטקסט עבור המשתמש. בצורה הפשוטה ביותר, אפשר לציין שתיבת טקסט שבה האות הראשונה של כל משפט חדש תהיה רישית באופן אוטומטי.
החל מ-Chrome 43, Chrome יתמוך במאפיין autocapitalize גם ב-HTMLInputElement וגם ב-HTMLTextAreaElement. כך תוכלו לשלוט בהתנהגות ההמרה של מקש ה-Caps Lock במקלדת הווירטואלית ולהתאים אותה ל-Safari ב-iOS.
האפשרות autocapitalize תחול רק על רכיבי HTMLInputElement שהמאפיין type שלהם מוגדר לערך: type="text", type="search", type="url", type="tel", type="email" או type="password". כברירת מחדל, לא מתבצעת הוספה אוטומטית של אותיות רישיות.
הנה דוגמה פשוטה שמאפשרת להתחיל משפטים באזור טקסט באותיות רישיות באופן אוטומטי:
<textarea autocapitalize="sentences">
אילו ערכים יכולים להופיע בהמרה אוטומטית של אותיות רישיות?
בטבלה הבאה מוצגים המצבים השונים שבהם אלמנט קלט יכול להיות:
| מדינה | מילות מפתח | |
|---|---|---|
<input><input autocapitalize=off>
|
ללא שימוש באותיות רישיות | none [ברירת מחדל] |
| מושבתת | ||
<input autocapitalize=characters> |
שימוש באותיות רישיות | תווים |
<input autocapitalize=words> |
שימוש באותיות רישיות במילים | words |
<input autocapitalize=sentences> |
שימוש באותיות רישיות במשפטים | משפטים |
עבור HTMLInputElement, ערך ברירת המחדל של הערך הלא חוקי הוא Sentences Capitalization אם הסוג של הרכיב הוא type=text או type=search. אחרת, הערך הוא No Capitalization.
<input autocapitalize="simon">יהיה שדה טקסט עם אותיות רישיות במשפטים<input type="email" autocapitalize="simon">יהיה שדה טקסט עם ללא שימוש באותיות רישיות.<input>יהיה שדה טקסט עם ללא שימוש באותיות רישיות.
עבור HTMLTextAreaElement, ערך ברירת המחדל של הערך הלא חוקי הוא Sentences
Capitalization. זהו שינוי מהתנהגות ברירת המחדל.
<textarea autocapitalize="terry"></textarea>יהיה אזור טקסט עם אותיות רישיות במשפטים<textarea></textarea>יהיה אזור טקסט עם שימוש באותיות רישיות בתחילת משפט.<textarea autocapitalize="none"></textarea>תהיה אזור טקסט עם ללא שימוש באותיות רישיות.
לגבי HTMLFormElement, החלטנו לא להטמיע את המאפיין כי גילינו שהוא נמצא בשימוש נדיר בדפים היום, וכשנעשה בו שימוש, הוא משמש בעיקר להשבתת ההמרה של אותיות ראשיות לכתב מודגש באופן אוטומטי בטופס:
<form autocapitalize=off><input></form>
המצב הזה מוזר, כי מצב ברירת המחדל של HTMLInputElement הוא No Capitalization.
למה בחרת להשתמש ב-inputmode?
inputmode נועד, בין היתר, לפתור את אותו סוג של בעיה.
עם זאת, לא היו הטמעות בדפדפנים – למיטב ידיעתנו, רק ב-Firefox OS יש הטמעה, והיא מתחילה בתחילית (x-inputmode) – אבל גם השימוש בה באינטרנט מועט מאוד. לעומת זאת, כבר משתמשים ב-autocapitalize במיליוני דפים במאות אלפי אתרים.
מתי כדאי להשתמש באפשרות הזו?
זו לא רשימה מקיפה של המקרים שבהם כדאי להשתמש ב-autocapitalize, אבל יש כמה מקומות שבהם עזרה למשתמש להזין טקסט יכולה להועיל מאוד:
- כדאי להשתמש ב-
autocapitalization=wordsאם אתם:- שמות של אנשים (הערה: לא כל השמות פועלים לפי הכלל הזה, אבל רוב השמות המערביים ייכתבו באותיות רישיות באופן אוטומטי כמצופה)
- שמות חברה
- כתובות
- משתמשים ב-
autocapitalization=charactersאם אתם מצפים לקבל:- מדינות בארה"ב
- מספרי מיקוד בבריטניה
- משתמשים ב-
sentencesלרכיבי קלט אם מצפים לתוכן שמוזן בפורמט פסקה רגיל – לדוגמה, פוסט בבלוג. - משתמשים ב-
noneב-TextAreas אם מצפים לתוכן שלא אמור להיות מושפע – לדוגמה, הזנת קוד. - אם אתם לא רוצים להציג רמזים, אל תוסיפו את ההגדרה autocapitalize.