מבט אל HTML5 Placeholder תכונה

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

בימים ההם, אנחנו בדרך כלל עושים את זה עם, כדלהלן;

אין שום דבר רע עם תרגול זה, אבל זה קל יותר ב- HTML5.

HTML5 הציג תכונה חדשה עם שם לוגי; מציין מיקום. הנה דוגמה:

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

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

מוסיף מציין מיקום אל ה קלט you רדיו ו תיבת סימון לא יעשה שום הבדל.

Placeholder & CSS

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

הדוגמה הבאה מראה כיצד אנו משנים את טקסט מציין המיקום לירוק הן ב- Webkit והן ב- Firefox;

 input :: - webkit-input-placeholder color: green;  input: -moz-placeholder color: green;  

רק כדי לזכור זאת, :: - webkit-input-placeholder ו : -moz-placeholder ישפיע רק על הטקסט ולא ניתן לכתוב במקביל.

 קלט :: - webkit-input-placeholder, input: -moz-placeholder color: green;  

קטע קוד זה לא יעבוד.

בורר תכונות

CSS3 הגיע גם כדי לתמוך במאפיין זה על ידי הצגת [מציין מיקום] בורר התכונה;

 קלט [מציין מיקום] border: 1px solid green;  

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

תאימות לדפדפן

תכונה חדשה זו של HTML5 אינה מפתיעה בדפדפנים ישנים והיא נתמכת כעת באופן מלא רק ב: פיירפוקס 4+, Chrome 4+, ספארי 5+, אופרה 11.6 ו Internet Explorer 10 (אשר טרם שוחרר רשמית).

Placeholder פסולת

עם זאת, אם עלינו להציג את מציין המיקום בדפדפנים ישנים יותר, אך עדיין להשתמש בו מציין מיקום תכונה, אנו יכולים להשתמש Polyfills. יש הרבה Placeholder פסולת שם, אבל בדוגמה זו אנחנו הולכים להשתמש PlaceMe.js;

את PlaceMe.js, כפי שניתן לראות מקטע הקוד לעיל, תלוי ב- jQuery. עכשיו, אם אנחנו רואים את זה, למשל, Internet Explorer 9 כל קלט צריך להציג את הטקסט מציין מיקום.

• הצג הדגמה
• הורד מקור

מחשבה סופית

ה HTML5 Placeholder תכונה בהחלט עושה הוספת טקסט מציין מיקום קל יותר. עכשיו זה תלוי בנו, מפתחי אינטרנט ומעצבים, לבחור איזו שיטה להשתמש: JavaScript או HTML5.

אם אתה מחשיב כי השימוש Polyfills ו jQuery לתמוך בדפדפנים ישנים הוא מיותר, אז JavaScript הוא כנראה מתאים יותר לתפקיד. אבל אם אתה יכול להתעלם בשלווה הדפדפנים הישנים ואז באמצעות HTML5 Placeholder היא כנראה דרך טובה יותר.