נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

הוסף תגובה חדשה

 

= 6 + 9

תמונת המגיב

שלום רב בתאריך: 25.11.2014

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