Will focus be set to invisible form controls using HTML5 autofocus?

Question

As the title states: Will focus still be set on form controls with autofocus="autofocus" even if they are hidden with display: none; or visibility: hidden;?

Answer 1

If your question is whether a hidden field can steal autofocus from a visible one, the answer is no.

Hidden fields with an autofocus property get focus when they are made visible.

Here's a jsFiddle that shows what happens if you have a visible field and a hidden field, then show the hidden field.

And here's a variation that demonstrates what happens if the visible field does not have an autofocus property.

Answer 2

The HTML5 draft standard only requires that an element be "focusable" where focusable means:

An element is focusable if the user agent's default behavior allows it to be focusable or if the element is specially focusable, but only if the element is either being rendered or is a descendant of a canvas element that represents embedded content. User agents should make the following elements focusable, unless platform conventions dictate otherwise:

• a elements that have an href attribute
• link elements that have an href attribute
• button elements that are not disabled
• input elements whose type attribute are not in the Hidden state and that are not disabled
• select elements that are not disabled
• textarea elements that are not disabled
• command elements that do not have a disabled attribute
• Elements with a draggable attribute set, if that would enable the user agent to allow the user to begin a drag operations for those elements without the use of a pointing device
• Editing hosts
• Browsing context containers

It does say "but only if the element is either being rendered..." and the standard defines "rendered" as:

An element is being rendered if it is in a Document, either its parent node is itself being rendered or it is the Document node, and it is not explicitly excluded from the rendering using either:

• the CSS 'display' property's 'none' value, or
• the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or
• some equivalent in other styling languages. Just being off-screen does not mean the element is not being rendered. The presence of the hidden attribute normally means the element is not being rendered, though this might be overridden by the style sheets. User agents that do not honor author-level CSS style sheets are nonetheless expected to act as if they applied the CSS rules given in these sections in a manner consistent with this specification and the relevant CSS and Unicode specifications.

In short, the answer appears to be that if all other requirements are met then display:none won't be focused but display:hidden will - Assuming all browsers actually follow the spec.