HTML5 Autofocus Explained

  • Avinash
  • 0
  • Sep 26, 2012
  • Web Development

Autofocus is also one of the important enhancement in HTML5. In OLD days we used to achieve this with JavaScript code. But now this can be achieved with the HTML code only. We just need add one more attributes to the HTML element.

For example if you look at the Google Homepage; cursor is automatically focused on search field. User don’t have to get focus on that manually they just can start searching directly without placing the cursor on search field manually. Ultimately this increases the User Experience of your website.

So to achieve the autofocus we just need to palce one attribute to the HTML element. This attribute can be places on any HTML element but it is well suited for Text boxes and Text area. Just have a look at below HTML code for the same.

<form>
  <input id="search_box" autofocus>
  <input type="submit" value="Search">
</form>

Above I have mentioned; this will increase the User Experience also we know that HTML5 is not fully supported on all browsers. So what about the User Experience for the who are using older or other browser which does not support HTML5 fully? Well in this case JavaScript comes to the rescue.

Here I don’t mean to say that don’t use HTML5 attribute and use JS only. But with JS we can detect the support for the HTML5 attribute and can place the fallback for the same. So now how our form should look like is as below:

<form>
  <input id="search_box" autofocus>
  <input type="submit" value="Search">
</form>
<script>
if (!("autofocus" in document.createElement("input")))
{
    document.getElementById("search_box").focus();
}
</script>

Above code is core javascript code so it will execute once all content are loaded of the webpage. So you might face delay in execution of the above code if you have more images in your web page.

So to overcome this situation it is recommended to use jQuery’s document.ready or MooTools’ domready (reference) event. It will execute on once DOM is initialized in the web page. So let’s see how you can have the same code with jQuery and Mootools.

Autofocus Fallback with jQuery

$(document).ready(function() { if (!("autofocus" in document.createElement("input"))) { $("#search_box").focus(); } });
  $(document).ready(function() {
    if (!("autofocus" in document.createElement("input"))) {
      $("#search_box").focus();
    }
  });

Make sure you have included the jQuery main file before this code.

Autofocus Fallback with MooTools

Make sure you have included the at least MooTools core file.

window.addEvent('domready', function(){ if (!("autofocus" in document.createElement("input"))) { $("search_box").focus(); } });
  window.addEvent('domready', function(){
    if (!("autofocus" in document.createElement("input"))) {
      $("search_box").focus();
    }
  });

Hope this become helpful to you. It is good to have the fallback in place to give equal justice to older browsers too. Any thoughts?

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: