سلام به شما دوستان گرامی ، حالتون که خوبه . با اموزشی درزمینه html درخدمت شما هستم.Placeholder یک تکست باکس است که وقتی هیچ مقداری مشخص نشده و یا هیچ مرکزیتی وجود ندارد، متنی را با سایه ی روشن تر نگه می دارد.
در زیر می بینید که اگر هیچ مقداری مشخص نشده باشد یک placeholder چگونه به نظر می رسد (آنچه شما می بینید فقط یک تصویر است و نه یک placeholder واقعی، روی آن کلیک نکنید.)
آموزش HTML5
وقتی که تکست باکس روی چیزی تمرکز می کند، متن خاموش می شود و شما باید متن خود را در آن قرار دهید.
آموزش HTML5
در اینجا کد مربوط به placeholder را می بینید. دیگر لازم نیست که جاوا اسکریپت و CSS به ظاهر متن رسیدگی کنند.
:
اجازه بدهید ببینیم کدام مرورگرها placeholder را پشتیبانی می کنند.
Browsers
Placeholder Support
IE 10
✓
Firefox 3.7
✓
Safari 4.0
✓
Chrome 4.0
✓
Opera 11
✓
اگر placeholder در صفحه ی وب شما فقط یک ویژگی خوب است، احتمالا در مورد پشتیبانی مرورگرها به جز موارد بالا، اذیت نخواهید شد.
در غیراینصورت مجبورید راه های اضافه ای بروید. ابتدا برای اینکه چک کنید مرورگر placeholder را پشتیبانی می کند، از جاوا اسکریپت استفاده کنید. برای مرورگرهایی که placeholder را پشتیبانی نمی کنند از javascript+CSS استفاده کنید تا placeholder خود را ایجاد کنید.
:
function testAttribute(element, attribute)
{
var test = document.createElement(element);
if (attribute in test)
return true;
else
return false;
}
if (!testAttribute(“input”, “placeholder”))
{
window.onload = function()
{
var demo = document.getElementById(“demo”);
var text_content = “No Placeholder support”;
demo.style.color = “gray”;
demo.value = text_content;
demo.onfocus = function() {
if (this.style.color == “gray”)
{ this.value = “”;this.style.color = “black” }
}
demo.onblur = function() {
if (this.value == “”)
{ this.style.color = “gray”;this.value = text_content;}
}
}
}
عملکرد testAttribute در بالا برای امتحان کردن این است که آیا یک ویژگی از یک عنصر توسط یک مرورگر پشتیبانی می شود. در این مورد می خواهیم بدانیم که آیا مرورگر شما ویژگی placeholder مربوط به عنصر ورودی را پشتیبانی می کند. اگر placeholder پشتیبانی نمی شود، من مرورگر را به اجرای چند کد جاوااسکریپت وامی دارم تا چیزی با عنوان placeholder ایجاد کند. شما می توانید از جاوااسکریپت خود استفاده کنید.
Placeholder demo :
اگر از مرورگری استفاده می کنید که placeholder را پشتیبانی می کند، باید قار باشید عبارت support place holder را در تکست باکس ببینید. بالعکس اگر از مرورگری استفاده می کنید که placeholder را پشتیبانی نمی کند، عبارت “No Placeholder Support” را در تکست باکس خواهید دید.
