التعليق: تم تقديم العديد من الميزات الجديدة المثيرة للاهتمام في HTML5 ؛ ينعكس بعضها في HTML ، بعضها APIs JavaScript ، وكلها مفيدة للغاية. واحدة من ميزاتي المفضلة هي خاصية العنصر النائب في مربع النص (الإدخال).
تتيح لك خاصية العنصر النائب عرض معلومات المطالبة في مربع النص. بمجرد إدخال أي معلومات في مربع النص ، سيتم إخفاء معلومات المطالبة. ربما تكون قد رأيت هذا التأثير مرات لا تحصى من قبل ، ولكن يتم تنفيذ معظمها في JavaScript ، والآن يوفر HTML5 الدعم الأصلي ويعمل بشكل أفضل!
رمز HTML
لقد رأيت أيضًا أن كل ما عليك فعله هو إضافة سمة العنصر النائب إلى ملصق الإعلان لمربع النص. جافا سكريبت ليست ضرورية على الإطلاق لإنشاء هذا التأثير.
تحقق مما إذا كان المتصفح يدعم سمة العنصر النائب
نظرًا لأن العنصر النائب هو خاصية جديدة ، فمن الضروري للغاية التحقق مما إذا كان متصفحك يدعمه. على سبيل المثال ، لا يتم دعم IE6 و IE8 بالتأكيد:
الوظيفة hasplaceholdersupport () {
var input = document.createElement ('input') ؛
العودة ("العنصر النائب" في المدخلات) ؛
}
إذا كان متصفح المستخدم لا يدعم ميزة العنصر النائب ، فأنت بحاجة إلى استخدام Mootools أو Dojo أو أدوات JavaScript الأخرى لتنفيذها:
/* Mootools FTW! */
var firstNamebox = $ ('first_name') ،
message = firstNameBox.get ('legal joad') ؛
FirstNameBox.addevents ({
التركيز: وظيفة () {
if (firstNameBox.value == message) {searchbox.value = '' ؛ }
} ،
Blur: function () {
if (firstNamebox.value == '') {searchbox.value = message ؛ }
}
}) ؛
تجميل العنصر النائب مع CSS
خلال مزيد من البحث ، اكتشفت ميزة أخرى مثيرة للاهتمام CSS: CSS تقوم بتجميل التأثير النائب للمدخلات. اسمحوا لي أن أستخدم رمز CSS بسيط لتجميل النص النائب في مربع النص.
رمز CSS
يختلف الاستخدام في متصفح Firefox عن ذلك في Google Chrome. من السهل فهم أسمائهم:
/* الجميع */
::-WebKit-Input-placeholder {color:#f00 ؛ }
::-Moz-placeholder {color:#f00 ؛ } / * Firefox 19+ * /
: -MS-Input-placeholder {color:#f00 ؛ } /* أي */
الإدخال: -moz-placeholder {color:#f00 ؛ }
/ * الفردية: WebKit */
#field2 ::-WebKit-Input-placeholder {color:#00f ؛ }
#field3 ::-WebKit-Input-placeholder {color:#090 ؛ الخلفية: Lightgreen ؛ تحويل النص: الكبير. }
#field4 ::-WebKit-Input-placeholder {font-style: italic ؛ تدمير النص: Overline ؛ تباعد الرسائل: 3px ؛ اللون:#999 ؛ }
/ * فرد: موزيلا */
#field2 ::-Moz-placeholder {color:#00f ؛ }
#field3 ::-Moz-placeholder {color:#090 ؛ الخلفية: Lightgreen ؛ تحويل النص: الكبير. }
#field4 ::-Moz-placeholder {font-style: italic ؛ تدمير النص: Overline ؛ تباعد الرسائل: 3px ؛ اللون:#999 ؛ }
يمكنك التحكم في الخط واللون وأسلوب النص النائب. يمكنك حتى عرض العنصر النائب لمربع النص بطريقة متحركة. إن تجميل مربعات النصوص الخاصة بك هو شيء يبدو صغيرًا ، ولكن بالنسبة لبعض مواقع الويب التفاعلية ، يكمن مفتاح النجاح في التفاصيل. الآن IE10 يدعم فقط العنصر النائب. أعتقد أن المزيد والمزيد من الناس سوف يستخدمون هذا التأثير النائب الأصلي.