HTML5 autofocus lost on one-page sites

Question

I wonder if someone has the answer to this dilemma? When one has autofocus set on an input element which is not in the page's landing section, autofocus is lost when a user click's a menu tag to go to that section. (e.g. a contact section where there is likely to be a form) ...

Answer 1

The autofocus attribute -

lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.

Is designed to prompt user agents to give initial focus to a form field when the page loads, providing a less "jarring" and more controllable experience to users of assistive technologies than previous JavaScript based solutions - which often "stole" focus after the user had already began to navigate the document.

The problems with using this attribute in your case are two fold-

1. The page load event will only fire once, and does not fire again when you move focus to a new "page" internally within the same document

2. It is invalid to have more than one element within the same document - in this case your entire single page document - which has the autofocus element.

What you need to do is use the native JavaScript focus method on a form element of your determination within the new viewport area.

If you have a reference to the new "page" element or container, you could use a class or data-attribute to specify the desired element by using the querySelector method or jQuery.

Something like-

var firstElement = pageContainer.querySelector('.focus-field');

if (firstElement) { 
    firstElement.focus();
}

Alternatively you could simply use an element selector to select the first form element-

var firstElement = pageContainer.querySelector('input, select');

if (firstElement) { 
    firstElement.focus();
}

Be aware in this case that it is invalid to focus a hidden input (for hopefully obvious reasons), and if you wish to use this solution it might be best to use the querySelectorAll method and loop through - checking that the type is not hidden and breaking out of the loop on the first valid element to focus. Or simply use attribute selectors and only select inputs of type text.

If you are using jQuery you could use the not function to exclude hidden inputs from the selected elements.