قام HTML5 بإجراء العديد من التحسينات على نموذج الويب ، مثل نوع الإدخال الجديد ، والتحقق من صحة النموذج ، وما إلى ذلك. عندما يقوم الإدخال أو Textarea بتعيين هذه السمة ، سيتم عرض محتوى هذه القيمة في مربع النص كمطالبة كلمة رمادية. عندما يركز مربع النص على التركيز ، يختفي النص المطالب. في الماضي ، لتحقيق هذا التأثير ، تم استخدام JavaScript للسيطرة عليه:
نظرًا لأن العنصر النائب هو سمة جديدة ، فإن عدد قليل من المتصفحات تدعمها حاليًا. كيفية اكتشاف ما إذا كان المتصفح يدعمه؟ (يمكن الوصول إلى المزيد من الكشف عن ميزة HTML5/CSS3)
الوظيفة hasplaceholdersupport () {
إرجاع "العنصر النائب" في المستند.
}
نص المطالبة الافتراضية رمادي ، ويمكن تغيير نمط النص من خلال CSS:
/ * all */::-WebKit-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 ؛ } / * الفردية: mozilla * /#field2: -moz-placeholder {color:#00f ؛ }#field3: -moz-placeholder {color:#090 ؛ الخلفية: Lightgreen ؛ تحويل النص: الكبير. }#field4: -moz-placeholder {font-style: italic ؛ تدمير النص: Overline ؛ تباعد الرسائل: 3px ؛ اللون:#999 ؛ }متوافق مع المتصفحات الأخرى التي لا تدعم العنصر النائب:
var leacholder = {
_support: (function () {
إرجاع "العنصر النائب" في المستند.
}) () ،
// يجب تحديد نمط النص الموجه في مواقع أخرى على الصفحة
ClassName: 'ABC' ،
init: function () {
if (! leacholder._support) {
// لم تتم معالجة textarea ، أضف ما عليك القيام به
var inputs = document.getElementSbyTagName ('input') ؛
النائب. إنشاء (مدخلات) ؛
}
} ،
إنشاء: وظيفة (مدخلات) {
إدخال var ؛
if (! inputs.length) {
المدخلات = [المدخلات] ؛
}
لـ (var i = 0 ، length = inputs.length ؛ i <length ؛ i ++) {
المدخلات = المدخلات [i] ؛
if (! legholder._support && input.attributes && input.attributes.placeholder) {
النائب ._setValue (إدخال) ؛
input.addeventListener ('Focus' ، function (e) {
if (this.value === this.attributes.placeholder.nodevalue) {
this.value = '' ؛
this.className = '' ؛
}
}، خطأ شنيع)؛
input.addeventListener ('Blur' ، function (e) {
if (this.value === '') {
العنصر النائب ._SetValue (هذا) ؛
}
}، خطأ شنيع)؛
}
}
} ،
_SetValue: Function (input) {
input.value = input.attributes.placeholder.nodevalue ؛
input.className = placeholder.className ؛
}
} ؛
// تهيئة جميع المدخلات عند تهيئة الصفحة
//placeholder.init () ؛
// أو تعيين عنصر بشكل منفصل
//placeholder.create(document.getElementByid('t1 ')) ؛