יכול להיות שהתכונה הזו נראית כמו התכונה הכי לא מרשימה בעולם, אבל לדעתי היא חשובה כי כולם שונאים להקליד בנייד: אתם שונאים את זה, ואני מתעבת את זה. ב-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.