نظرة على سمة العنصر النائب HTML5

واحدة من القطع المفضلة الجديدة في HTML5 هي القدرة على الإضافة نص العنصر النائب بسهولة. نص العنصر النائب هو النص الرمادي الذي تجده في حقل الإدخال المستخدم لإعطاء تلميح للمستخدمين بشأن ما هو متوقع من الإدخال في هذا الحقل. بمجرد أن يبدأ المستخدمون الكتابة في إدخال الحقل ، سوف تختفي هذا النص.

في الأيام الخوالي ، عادة ما نفعل هذا مع جافا سكريبت, على النحو التالي؛

لا حرج في هذه الممارسة ، ولكنها أسهل في HTML5.

قدم HTML5 سمة جديدة باسم منطقي. نائب. هنا مثال:

إذا شاهدناه على المتصفحات ، فيجب أن يكون للإدخال الآن النص الرمادي ، كما هو موضح أدناه ؛

وهناك بعض الأشياء التي تجدر الإشارة إليها: وفقا للمواصفات ، و نائب يجب عدم استخدام السمة كبديل لـ ضع الكلمة المناسبة ويقترح أيضًا تطبيق هذه السمة على إدخال الأنواع التي تتطلب نصًا ، على سبيل المثال. نص, كلمه السر, بحث, البريد الإلكتروني, تيكستاريا و الهاتف.

مضيفا نائب إلى إدخال أنواع: راديو و مربع لن تحدث فرقا.

العنصر النائب و CSS

علاوة على ذلك ، من الممكن أيضًا تصميم نص العنصر النائب من خلال CSS ، ولكن في وقت كتابة هذا التقرير ، كان لا يزال يقتصر فقط على متصفحي Firefox و Webkit.

يوضح المثال التالي كيفية تغيير نص العنصر النائب إلى اللون الأخضر في Webkit و Firefox ؛

 input :: - webkit-input-placeholder color: green؛  الإدخال: -moz-placeholder color: green؛  

فقط لنتذكر رغم ذلك ، فإن :: - بكت-المدخلات ونائبا و : -moz-نائبا سوف يؤثر فقط على النص ولا يمكن كتابته بالتوازي.

 input :: - webkit-input-placeholder، input: -moz-placeholder color: green؛  

لن تعمل هذه الشفرة.

محدد السمة

جاء CSS3 أيضا لدعم هذه السمة من خلال تقديم [إشارة] محدد السمة

 إدخال [عنصر نائب] حد: 1px أخضر خالص؛  

في المثال أعلاه ، نختار كل إدخال التي لديها نائب السمة وتغيير الحدود إلى اللون الأخضر.

التوافق المتصفح

ميزة HTML5 الجديدة هذه ليست مدهشة في المستعرضات القديمة وهي غير مدعومة حاليًا بشكل كامل في: Firefox 4+ و Chrome 4+ و Safari 5+ و Opera 11.6 و انترنت اكسبلورر 10 (لم يتم إصداره رسميًا بعد).

Polyfills العنصر النائب

ومع ذلك ، إذا كنا بحاجة إلى عرض العنصر النائب في المتصفحات القديمة ولكن لا يزال بإمكاننا استخدام نائب السمة ، يمكننا استخدام Polyfills. هناك الكثير من Polyfills العنصر النائب هناك ولكن في هذا المثال ، سنستخدم PlaceMe.js ؛

The PlaceMe.js, كما ترى من مقتطف الشفرة أعلاه ، يعتمد على مسج. الآن ، إذا شاهدناه في ، على سبيل المثال ، يجب أن يعرض كل المدخلات الآن نص العنصر النائب.

• عرض تجريبي
• تحميل المصدر

الفكر النهائي

ال HTML5 عنصر نائب تجعل السمة بالتأكيد إضافة نص عنصر نائب أسهل. الآن الأمر متروك لنا ، مطوري الويب والمصممين ، لاختيار الطريقة التي يجب استخدامها: JavaScript أو HTML5.

إذا كنت تعتقد أن استخدام Polyfills و jQuery لدعم المتصفحات القديمة يعد أمرًا ضروريًا ، فمن الواضح أن JavaScript مناسب للعمل. ولكن إذا كنت تستطيع تجاهل المتصفحات القديمة بشكل سلمي ، فمن المحتمل أن يكون استخدام HTML5 Placeholder طريقة أفضل.