The pitfalls of the HTML5 autofocus attribute

HTML5 adds lots of cool and useful new features to HTML. One such feature is the autofocus attribute that has been added to the input element. autofocus automatically puts the focus on that element when the page is loaded, no JavaScript needed. For instance you could use it on a search page so the user can just start typing instead of having to click the search field first. This is a nice convenience feature but it can have its drawbacks. Particularly when used on a page that is meant to be accessed through a mobile browser, especially if the user has their phone in a landscape orientation: As you can see because the field is autofocused, the soft-keyboard pops up and obscures most of the page.