Monday, October 31, 2011

autofocus to multiple controls in HTML5

The HTML5 spec says:

There must not be more than one element in the document with the autofocus attribute specified.

Excellent, so what happens if you set multiple elements with the autofocus attribute? And in various browsers? Results below ...

Autofocus not supported:


First Element gets the focus:

IE 10 preview, FF

The last element gets the focus:

Chrome, Opera, Safari

Though its up to the User Agents to implement the behavior, I prefer the Webkit implementation of this feature compared to that of Mozilla and Trident. 


HTML5 says that browsers should gracefully degrade. They should try to render whatever possible. Not being strict that is. So if a browser stops with the first autofocus, one will never know if there were more than one autofocus elements in the document. But, if the browser renders and sets every autofocus as it parses the document, thus stopping at the last autofocus, the developer will immediately know something is amiss and correct/remove the unwanted autofocus. An added advantage one can thus get with webkit.