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);}
    });
});