Another one of the cool and awesome HTML5 contributions includes the autofocus input attribute. The <input type=”text” autofocus> is just one example of several input types that allows us to auto-focus on elements upon page load using the HTML5 autofocus attribute. This task was previously accomplished with JavaScript, JQuery, and Flash, and functions quite similarly to form validation; however, this is now becoming available using HTML5. I also provide a browser support and input types matrix to sort out the various implementation obstacles between the user agents and input types.

The central definition of autofocus as given by the WHATWG states, “The autofocus content attribute allows the web developer to indicate that a particular control is to be focused on as soon as the page is loaded or as soon as the dialog within which it finds itself is shown, allowing the user to just start typing without having to manually focus the main control”.

Browser support

I know your first question is going to be what browsers currently support the HTML5 autofocus attribute? It is currently supported by the following browsers and user agents as reported by Wufoo in their “The Current State of HTML5 Forms,” The Autofocus Attribute. Wufoo’s website also provides several good tips for implementing the attribute:

Browser

Chrome

Firefox

IE

Opera

Safari
Version

6+

4+

10

11+

5+
Support

Supported

Supported

Supported

Supported

Supported

Input types

Sorting out the various input types becomes a granular approach to finding which browser supports each type of input for the HTML5 autofocus attribute. Using Michael Taylor’s HTML5 input attribute core tests in your browser (See Figure A below), the core test can determine your browser’s support for the HTML5 inputs and attribute support. His core test not only shows results for autofocus, but it also provides testing against other HTML5 inputs and attribute support including autocomplete, list, maxlength, pattern, placeholder, readonly, required, and size.

Figure A

Click to enlarge.

Based on Michael’s HTML5 input attribute core test, I verified several browsers installed on my PC as well as several browsers from the Adobe BrowserLab Browser Sets Test and created this matrix to show the specific input types sorted by browser as shown in Figure B below:

Figure B

Click to enlarge.

Unfortunately I was not able to test IE 10, so I do not have the input types that pass/fail to display for it in the matrix. However, I created and manually tested an example demo index.htm file in IE8 and verified that HTML5 autofocus does not work as shown in Figure C below:

Figure C

The same example demo index.htm file displayed in Chrome 22.0.1 is shown in Figure D:

As you can see from the screen capture in Chrome, the autofocus is on the last item and the placeholders are showing on the other examples below it. Note that since there are multiple instances of autofocus on this particular demo web page that the last one without the placeholder is the focus on page load, as a rule you only want to have one autofocus per web page document. The examples displayed above include the following code snippets from the demo index.htm file:

<input autofocus /></input>
<button autofocus>Hello World!</button></li>
<textarea autofocus></textarea>
<input type="text" name="first name" placeholder="Enter your first name here" size="50" maxlength="48" />

The example html and CSS files are available for download.