العنصر النائب هو سمة أخرى تضاف إلى HTML5. عندما يقوم الإدخال أو Textarea بتعيين هذه السمة ، سيتم عرض محتوى هذه القيمة في مربع النص كمطالبة كلمة رمادية. عندما يركز مربع النص على التركيز ، يختفي النص المطالب. في الماضي ، تم تحقيق هذا التأثير باستخدام JavaScript للسيطرة عليه. أعرب عن دعمه Firefox ، Google Chrome ، وما إلى ذلك ، لكن IE لا يدعمه.
قام HTML5 بإجراء العديد من التحسينات على نموذج الويب ، مثل نوع الإدخال الجديد ، والتحقق من صحة النموذج ، إلخ.
العنصر النائب هو سمة أخرى تضاف إلى HTML5. عندما يقوم الإدخال أو Textarea بتعيين هذه السمة ، سيتم عرض محتوى هذه القيمة في مربع النص كمطالبة كلمة رمادية. عندما يركز مربع النص على التركيز ، يختفي النص المطالب. في الماضي ، استخدمت JavaScript للتحكم في هذا التأثير لتحقيقه. أعرب عن دعمه Firefox ، Google Chrome ، إلخ.
على سبيل المثال: <إدخال معرف = T1 type = نص نصي = الرجاء إدخال النص/
يقدم هذا مكونًا إضافيًا قويًا للغاية يدعم العنصر النائب تحت IE ، وهو متوافق أيضًا مع المتصفحات الأخرى التي لا تدعم العنصر النائب. الرمز كما يلي:
$ (document) .Ready (function () {var doc = docum ، inputs = doc.getElementsByTagName ('input') ، supportplaceholder = 'falsholder'in doc.createElement (' input ') ، epansholder = function (input) {var text = input.getAttribute (' placeholder ') ، defaultvalue = input.value = text} input.onfocus = function () {if (input.value === text) {this.value = ''}} ؛ i = 0 ، len = inputs.length ؛ i <len ؛ i ++) {var inputs = i] ، text = input.getAttribute ('leactolder') ؛ما عليك سوى نسخ الرمز وحفظه في مرجع ملف JS ، دون أي معالجة ، فهو مريح للغاية!
على سبيل المثال: يمكن أن يجعل هذا بالفعل عرض إدخال IE سمة العنصر النائب ، ولكن لا بأس إذا كان هناك إدخال واحد فقط في الصفحة. إذا كانت هناك مدخلات متعددة ، إذا لم يملأ الإدخال أي قيمة ، فسيقوم إدخاله الفارغ تلقائيًا بملء قيمة العنصر النائب في القيمة ، مما يؤدي إلى خطأ. على سبيل المثال:
<type type = text text placeholder = product product name = goodscode id = goodscode value = 123 /> <type type = text text leacholder = inport name = goomname id = goodsname value = inport product name />
الحل هو الحكم على ذلك بنفسك في الخلفية. ربما يمكن حلها في ملف JS أعلاه والبحث عنه لاحقًا ~!