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

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

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

آموزش Autofocus

Autofocus یک ویژگی Boolean از فیلد فرم می باشد که مرورگر را به تنظیم تمرکز روی آن، وقتی که یک صفحه بارگذاری می شود، وامی دارد. اگر هنوز متوجه نشدید که چیست، لطفا به گوگل رفته و بدون اینکه ابتدا روی تکست باکس بزرگ کلیک کنید.
فقط رشته ی جستجوی خود را تایپ کنید. این مسئله به این خاطر است که گوگل به طور خودکار روی آن تکست باکس تمرکز دارد (منظور من این نیست که گوگل از autofocus مربوط به HTML5 استفاده می کند.) و با یک کلیک ذخیره می شود.
در زیر کد انجام این کار را می بینید که خیلی ساده می باشد.

<label for="name">Your name goes here :</label><input id="name" type="text" autofocus /> <br />
‎<label for="mothername">Your dog's name goes here :</label><input id="mothername" type="text" ‎‎ />‎

Autofocus یک ویژگی Boolean می باشد و هیچ نیازی به تنظیم مقدار روی آن ندارد.
طبق معمول همه ی مرورگرها autofocus را پشتیبانی نمی کنند.

Autofocus Support
Browsers
IE 10
Firefox 4
Safari 4.0
Chrome 3.0
Opera 10

برای اجرای یک autofocus با خطای کمتر باید دوباره از جاوااسکریپت استفاده کنید تا چک کنید آیا مرورگر autofocus را پشتیبانی می کند، اگر نه تمرکزرا فقط با جاوااسکریپت تنظیم کنید.
در زیر نمایش و همچنین یک تست میبینید. اگر از autofocus پشتیبانی کند، متوجه می شود که مکان نما در تکست باکس اول چشمک می زند. و اگر مرورگر شما از آن پشتیبانی نمی کند، تمرکز روی دومین تکست باکس قرار می گیرد.

پشتیبانی autofocuse:
بدون پشتیبانی autofocuse:
<script>
                        function testAttribute(element, attribute) {
                        ‎  var test = document.createElement(element);
                        ‎  if (attribute in test) {
                        ‎   return true;
                        ‎ }
                        else
                        ‎ return false;
                        ‎}
‎  window.onload = function() {
   ‎ if (!testAttribute('input', 'autofocus'))
   ‎ document.getElementById('Text2').focus();
   ‎//for browser has no autofocus support, set focus to Text2.
   ‎}
‎</script>
‎<label for="Text1">Support Autofocus :</label><input id="Text1" type="text" autofocus /> <br />
‎<label for="Text2">No Autofocus Support :</label><input id="Text2" type="text" />‎
  • 2933
  •    1840
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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