פוקוס אוטומטי על שדה טקסט בטופס

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

שפת HTML5 הכירה לנו מושג חדש בטפסי HTML והוא: Autofocus. שימוש בתכונה זו כפי שתוכלו ללמוד מן המדריך לטפסים ב - HTML5 שבאתר זה מאפשר להעביר את הפוקוס לשדה הרצוי בצורה החלקה והטבעית ביותר עבור הדפדפן. הבעיה היא שבנקודת זמן זו לא כל הדפדפנים תומכים בתכונה זו ובוודאי שלא דפדפנים בגרסאות ישנות. משמעות הדבר היא שאם ברצוננו להוסיף תכונה זו לטפסים שלנו נצטרך להשתמש בפונקציה שתיכתב בשפה כמו שפת Javascript.

כדי להבין את הפונקציה שלנו ניצור טופס פשוט ובו שדה אחד שייראה כך:

דוגמה לטופס פשוט:

<form name="form1">
<input type="text" name="textbox1">
</form>

כעת נכתוב קוד שיעביר את הפוקוס באופן אוטומטי לשדה textbox1:

קוד המעביר את הפוקוס לשדה בתוך טופס:

<body onload="document.form1.textbox1.focus();">

כפי שביכולתכם לראות את הקוד שלנו מיקמנו באירוע load של האלמנט body. בכך הבטחנו שהקוד שלנו ירוץ לאחר שהדפדפן סיים לטעון את הטופס.

סיכום

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

חשוב להדגיש שמבחינת חווית המשתמש לא רצוי להשתמש ב - autofocus לשדה במקרים שבהם כאשר הדף עולה יש לגלול אותו כדי לראות את השדה הנדון.


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש