آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش اتریبیوت Input Attr : Placeholder

دوره های مرتبط با این مقاله

Placeholder یک تکست باکس است که وقتی هیچ مقداری مشخص نشده و یا هیچ مرکزیتی وجود ندارد، متنی را با سایه ی روشن تر نگه می دارد.
در زیر می بینید که اگر هیچ مقداری مشخص نشده باشد یک placeholder چگونه به نظر می رسد (آنچه شما می بینید فقط یک تصویر است و نه یک placeholder واقعی، روی آن کلیک نکنید.)

 اتریبیوت Placeholder

وقتی که تکست باکس روی چیزی تمرکز می کند، متن خاموش می شود و شما باید متن خود را در آن قرار دهید.

 اتریبیوت Placeholder

در اینجا کد مربوط به placeholder را می بینید. دیگر لازم نیست که جاوا اسکریپت و CSS به ظاهر متن رسیدگی کنند.

                        ‎<label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here">‎

اجازه بدهید ببینیم کدام مرورگرها placeholder را پشتیبانی می کنند.

Placeholder Support
Browsers
IE 10
Firefox 3.7
Safari 4.0
Chrome 4.0
Opera 11

اگر placeholder در صفحه ی وب شما فقط یک ویژگی خوب است، احتمالا در مورد پشتیبانی مرورگرها به جز موارد بالا، اذیت نخواهید شد.
در غیراینصورت مجبورید راه های اضافه ای بروید. ابتدا برای اینکه چک کنید مرورگر placeholder را پشتیبانی می کند، از جاوا اسکریپت استفاده کنید. برای مرورگرهایی که placeholder را پشتیبانی نمی کنند از javascript+CSS استفاده کنید تا placeholder خود را ایجاد کنید.

‎<label for="demo">Placeholder demo</label> : <input id="demo" placeholder="Support Placeholder" />‎‎
<script>
    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;}
    ‎   }
    ‎ }
    ‎}
‎</script> ‎

عملکرد testAttribute در بالا برای امتحان کردن این است که آیا یک ویژگی از یک عنصر توسط یک مرورگر پشتیبانی می شود. در این مورد می خواهیم بدانیم که آیا مرورگر شما ویژگی placeholder مربوط به عنصر ورودی را پشتیبانی می کند. اگر placeholder پشتیبانی نمی شود، من مرورگر را به اجرای چند کد جاوااسکریپت وامی دارم تا چیزی با عنوان placeholder ایجاد کند. شما می توانید از جاوااسکریپت خود استفاده کنید.

نسخه نمایشی :

اگر از مرورگری استفاده می کنید که placeholder را پشتیبانی می کند، باید قار باشید عبارت support place holder را در تکست باکس ببینید. بالعکس اگر از مرورگری استفاده می کنید که placeholder را پشتیبانی نمی کند، عبارت "No Placeholder Support" را در تکست باکس خواهید دید.

  • 3209
  •    1756
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .