یکی از امکانات جدیدی که در HTML5 اضافه شده است، خصوصیت Placeholder است؛ متن خاکستری رنگی که به صورت پیش فرض داخل کادرهای ورود اطلاعات نمایش داده شده و به محض ورود اطلاعات کاربر از بین می رود.

در گذشته (و حتی همچنان) از دستورات جاوا اسکریپت برای نمایش آن استفاده می کردیم. مانند مثال ساده زیر:

از زمان معرفی این خصوصیت HTML5، قرار دادن آن بسیار راحت تر از گذشته شده است:

برای مشاهده جزئیات مربوط به Placeholder با ما در ادامه مطلب همراه باشید.

نکته: خصوصیت Placeholder برای ورودی های متنی مانند text, password, textarea, email و ... طراحی شده است و طبیعتا قرار دادن آن برای ورودی هایی مانند radio و checkbox تاثیری در خروجی نخواهد داشت.

Placeholder و CSS

خوشبختانه تغییر مشخصات ظاهری Placeholder از طریق دستورات سی اس اس امکان پذیر است. اما متاسفانه تمام مرورگرها از آن پشتیبانی نمی کنند. مثال زیر رنگ Placeholder را به سبز تغییر می دهد:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #0F0;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #0F0;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #0F0;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #0F0;
}

انتخاب کادر حاوی Placeholder در CSS

در صورتیکه بخواهیم کادری را که در آن از Placeholder استفاده شده است را در سی اس اس انتخاب و مشخصات ظاهری آن را تغییر دهیم، می توانیم از دستور زیر استفاده کنیم. 
در مثال زیر، border کادر ورودی با رنگ سبز نمایش داده می شود:

input[placeholder] {
	border: 1px solid #0F0;
}

سازگاری با مرورگرها

جای تعجب ندارد که مشخصه Placeholder را تمامی مرورگرها (مخصوصا مرورگرهای قدیمی) پشتیبانی نمی کنند. Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6+, Internet Explorer 10 قادر به نمایش این خصوصیت مفید هستند.

در صورتیکه می خواهید مرورگرهای قدیمی هم این متن پیش فرض را نمایش دهند، می توانید با استفاده از دستورات جاوا اسکریپت (و با کمک کتابخانه های آن ها مانند jQuery و Mootools) مقدار Placeholder را استخراج و از آن در رویدادهای focus و blur استفاده نمایید.

استفاده از Placeholder مزایای زیادی دارد که حداقل آن سرعت بالای پیاده سازی سایت است. همچنین در صورت غیر فعال بودن جاوااسکریپت همچنان انجام وظیفه خواهد کرد. اما عدم سازگاری آن با مرورگرهای قدیمی باعث می شود که بسیاری از طراحان و برنامه نویسان وب سایت از جایگزین آن یعنی جاوااسکریپت استفاده کنند.

نظر شما چیست؟ کدام روش را ترجیح می دهید؟