Using HTML5 to Jump to the search box using autofocus

Autofocus is a HTML5 attribute that you add to input elements, which cause the browser to automatically focus on the input element when the page loads. Google and every other search engine have been doing this since the dawn of time (slight exaggeration) with JavaScript but now you can do it with some simple markup.

Demo view here Source on GitHub

Of course the autofocus attribute tag is not supported by every browser, but a great polyfill created by Amiel Martin exists which uses JavaScript to add support to unsupported browsers.

You just need to add the scripts to your document:

<script src="" type="text/javascript"></script>
<script src="html5support.js" type="text/javascript"></script>

Add a some script to initialise the library

$(document).ready(function () {           

You will then autofocus on elements with the attribute, such as:

 <input autofocus type="text" name="search" />
Comments (0)

Skip to main content