التعليق: قدم المتصفح العديد من ميزات HTML5. واحدة من المفضلة هي تقديم سمة العنصر النائب لعنصر الإدخال. تعرض سمة العنصر النائب النص دليلًا حتى يحصل مربع الإدخال على تركيز الإدخال. عندما يقوم المستخدم بإدخال المحتوى ، سيتم إخفاء محتوى الدليل تلقائيًا.
العنوان الأصلي: سمة العنصر الوطني HTML5العنوان التجريبي: العنصر النائب
التاريخ الأصلي: 9 أغسطس 2010
تاريخ الترجمة: 6 أغسطس 2013
يقدم المتصفح العديد من ميزات HTML5: بعضها يعتمد على HTML ، بعضها في شكل واجهات برمجة تطبيقات JavaScript ، لكنها جميعها مفيدة للغاية. واحدة من المفضلة هي تقديم سمة العنصر النائب لعنصر الإدخال.
تعرض خاصية العنصر النائب نصًا توجيهًا حتى يحصل مربع الإدخال على تركيز الإدخال. عندما يقوم المستخدم بإدخال المحتوى ، سيتم إخفاء محتوى الدليل تلقائيًا. لقد رأيت بالتأكيد هذه التقنية التي تم تنفيذها في JavaScript آلاف المرات ، ولكن الدعم الأصلي من HTML5 أفضل بشكل عام.
رمز HTML كما يلي:
<type type = "text" placeholder = "الرجاء إدخال العنوان الدائم ...">
كل ما عليك فعله هو إضافة مجال العنصر النائب وبعض محتوى النص الموجهة ، ولا تحتاج إلى نصوص JavaScript إضافية لتحقيق هذا التأثير. أليس هذا رائع؟
اختبار دعم العنصر النائب
(لاحظ أن هذا مقال من عام 2010. حتى الآن ، في عام 2013 ، كان ينبغي على المتصفحات السائدة دعمها.)
نظرًا لأن العنصر النائب هو ميزة جديدة ، فمن الضروري اختبار دعم المتصفح. رمز JS كما يلي:
// قم بإنشاء عنصر إدخال في JS وحدد ما إذا كان العنصر يحتوي على سمة تسمى العنصر النائب
// إذا كان المتصفح يدعمه ، فستكون هذه الخاصية موجودة في DOM المشار إليها في JS
الوظيفة hasplaceholdersupport () {
var input = document.createElement ('input') ؛
العودة ("العنصر النائب" في المدخلات) ؛
}
إذا لم يدعم المتصفح ميزة العنصر النائب ، فأنت بحاجة إلى استراتيجية احتياطية للتعامل معها ، مثل Mootools أو Dojo أو أدوات JavaScript الأخرى. (الآن يمكن استخدام دوجو أقل ، وأكثر من ذلك في الصين هي jquery و extjs.)
/* كود jQuery ، بالطبع ، تذكر تقديم مكتبة jQuery*/
$ (function () {
if (! hasplacholdersupport ()) {
// احصل على عنصر العنوان
var $ address = $ ("input [name = 'address']") ؛
العنصر النائب = $ address.attr ("legal jold") ؛
// inter Focus Event
$ address.bind ('Focus' ، function () {
if (legholder == $ address.val ()) {
$ address.val ('') ؛
}
}) ؛
// حدث التركيز المفقود
$ address.bind ('Blur' ، function () {
if ('' == $ address.val ()) {
$ address.val (عنصر نائب) ؛
}
}) ؛
}
}) ؛
النائب هو خاصية إضافية رائعة أخرى للمتصفح لاستبدال مقتطفات JS ، يمكنك حتى تعديل نمط العنصر النائب لـ HTML5.
جميع الرموز هي كما يلي:
<! doctype html>
<html>
<head>
<title> HTML5 Placeholder Attribute العرض التوضيحي </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "Original = http: //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script>
// قم بإنشاء عنصر إدخال في JS وحدد ما إذا كان العنصر يحتوي على سمة تسمى العنصر النائب
// إذا كان المتصفح يدعمه ، فستكون هذه الخاصية موجودة في DOM المشار إليها في JS
الوظيفة hasplaceholdersupport () {
var input = document.createElement ('input') ؛
العودة ("العنصر النائب" في المدخلات) ؛
}
/* كود jQuery ، بالطبع ، تذكر تقديم مكتبة jQuery*/
$ (function () {
if (! hasplacholdersupport ()) {
// احصل على عنصر العنوان
var $ address = $ ("input [name = 'address']") ؛
العنصر النائب = $ address.attr ("legal jold") ؛
// inter Focus Event
$ address.bind ('Focus' ، function () {
if (legholder == $ address.val ()) {
$ address.val ('') ؛
}
}) ؛
// حدث التركيز المفقود
$ address.bind ('Blur' ، function () {
if ('' == $ address.val ()) {
$ address.val (عنصر نائب) ؛
}
}) ؛
}
}) ؛
</script>
</head>
<body>
<viv>
<form method = "post" Action = "">
<type type = "text" placeholder = "الرجاء إدخال العنوان الدائم ...">
<type type = "إرسال" value = "test">
</form>
</div>
</body>
</html>