آموزش اتریبیوت 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 با خطای کمتر باید دوباره از جاوااسکریپت استفاده کنید تا چک کنید آیا مرورگر 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" />‎