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.
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:
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.
Make sure you have included the jQuery main file before this code.
Make sure you have included the at least MooTools core file.
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?
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: Avinash