מרחשוון (8)

אכלוס אוטומטי של שדות בטופס

הפוסט הזה הופיע בבלוג של רוג’ר ג’והנסון, מפתח האינטרנט השוודי האמון על כתיבת קוד תקני, שמישותי ונגיש.
הן מסיבות של נגישות, והן מסיבות של שמישות, לכל שדות input ולכל הפקדים האחרים בטופס (חוץ מכפתורים) צריך שתהיה תוית (label) משוייכת אליהם, המציינת בבהירות מהי מטרת הפקד, או באיזה קלט אמור המשתמש למלא את הפקד.
לפעמים העיצוב מטיל מגבלות על תויות אלה, לפעמים עד כדי אי הופעתן כלל. אולי אחת הדוגמאות הנפוצות לכך היא טופס חיפוש בכל האתר, שבהם המעצב הגרפי לעתים קרובות אינו מוכן לקבל תוית ויזואלית. זה אינו מצב אידיאלי, אבל הוא קורה, אז צריך להוציא מהמצב הזה את המיטב. ומכיון שהיה עליו להתמודד עם זה בפרוייקט שהוא ביצע לאחרונה, הוא מתאר בפוסט את הטכניקה שבה הוא השתמש לבסוף.
בפוסט שלו הוא מראה את ה-HTML, ה-CSS וה-JS. אני אסתפק פה בהסבר קצר על הטכניקה, אבל אני ממליצה מאד להכנס לפוסט שלו, ולו כדי לראות קוד unobtrusive ששפתיים יישקו!

הטכניקה: הוא יוצר label שבו יש את הטקסט “Enter search text”. במקרה שלאדם אין JS, הוא יראה את הטקסט הזה, ולידו את שדה החיפוש.
בשדה החיפוש עצמו, הוא מכניס את הטקסט “Enter search text” בתוך המאפיין title. בינתיים, אף אחד לא יכול לראות את הטקסט הזה.
מה קורה אם יש JS?
ב-JS, ג’והנסון מפעיל class על ה-label, שמסתיר אותו מהדפדפן (position:absolute; left:-9999px; ). אח”כ, הוא לוקח מה שכתוב במאפיין ה- title של שדה הטקסט, ומכניס אותו ל-value:
if ((oInput.value == ”) && (oInput.title ! = ”)) { oInput.value = oInput.title; }
לבסוף הוא קושר שני ארועים (event-ים) – בצורה בלתי פולשנית – לשדה הטקסט: ארוע onFocus שבו הוא מנקה את ה-value, וארוע onBlur, שבו הוא בודק את שדה הטקסט, ואם אין בו שום קלט של המשתמש, הוא שוב מעתיק את מה שכתוב ב-title ל-value של שדה הטקסט.
כאמור, אני ממליצה בחום להכנס לפוסט לראות את הקוד עצמו, כי יש הרבה מה ללמוד ממנו.

את התוצאה הסופית ניתן לראות כאן. אפשר לכבות JS ו-CSS ולראות איך הטופס מתפקד להפליא גם בלעדיהם.

תגובה 1 על “אכלוס אוטומטי של שדות בטופס

  1. הממ

    קראתי כבר את הפוסט הזה והוא באמת מאוד מוצלח. אבל משום מה, כשאני רציתי לעשות משהו דומה באתר שאני בונה בכליקיט, ה left:-999px; עשה scroll ענק ב ie. בכל מקרה, הדרך שבה הוא עובד מאוד יפה ויש הרבה מה ללמוד וליישם.

כתבו תגובה

כתובת הדוא"ל שלכם לא תוצג.