placeholder לשדות בטופס באמצעות HTML5 או jQuery
Placeholder הוא מחזיק מקום בשדה בטופס אינטרנטי, שמאפשר להציג את התווית או הוראות נוספות בתוך השדה עצמו. ראו הדגמה:
HTML5
את הפלא השימושי הזה ניתן לבצע באמצעות attribute ששמו placeholder שמספק HTML5, וכך נראה הקוד:
<input type="text" id="name" name="name" size="60" placeholder="שם" >
JavaScript
לעתים, איננו יכולים, מסיבות שונות להשתמש ב-HTML5, ובמקרים אלו נוכל לבצע דבר דומה מאוד באמצעות jQuery, שישתול בשדה ערך שיתפקד בדומה ל-placeholder.
הטמ"ל - טופס ובו מספר שדות
<form action="" method="post" id="webform" accept-charset="UTF-8">
<input type="text" id="name" name="name" size="60" data-placeholder="שם" />
<input type="text" id="tel" name="tel" size="60" data-placeholder="טלפון" />
</form>
שימו לב, שאת ה-placeholder הכנסתי לתוך data-placeholder כדי שנוכל להעביר את המידע ל-javascript.
כך נראה קוד ה-javascript שנכתב באמצעות jQuery:
הפונקציה הראשונה first(), קוראת לעצמה בפעם הראשונה שהדף נטען, והופכת את ה data-placeholder לערך השדה.
//מאזין לטופס כולו
var form = $('form#webform');
//פונקציה שקוראת לעצמה כשהדף נטען בפעם הראשונה
(function first(){
//בכל אחד משדות הטופס
form.find('input').each(function(){
var this_input = $(this);
//לוקחים את הערך
var placeholder = this_input.data('placeholder');
//מציבים אותו בתור הערך של השדה
this_input.val(placeholder);
});
})();
כשנכנסים לכל אחד מהשדות מתרחש אירוע של jQuery ששמו focusin, ואם הכיתוב שווה ל-placeholder, הוא נמחק. ביציאה מהשדה, מתרחש האירוע focusout , ואם השדה ריק הוא מתמלא מיד בערך של placeholder:
//כשנכנסים לכל אחד מהשדות
form.on('focusin', 'input', function(){
var this_input = $(this);
//משתנה לשמירת ערך השדה
var value = this_input.val();
//placeholder
var placeholder = this_input.data('placeholder');
//אם המשתנים שווים, אז תמחק
if(value == placeholder) {this_input.val('');}
//ביציאה מהשדה
form.on('focusout', 'input', function(){
//ערך השדה
var value = this_input.val();
//אם השדה ריק, אז ממלאים אותו
if(value == '') {this_input.val(placeholder);}
});
});
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
שלום רב בתאריך: 25.11.2014
ניסיתי את הדוגמא נ"ל ולא עובד לי , זה נראה מצויין וחבל, כנראה שחסר לי פרט מסויים בכל מקרה תודה רבה