Autofocus Fields
Many websites use JavaScript to focus the first input field of a web form automatically. For example, the home page of Google.com will autofocus the input box so you can type your search keywords without having to position the cursor in the search box. While this is convenient for most people, it can be annoying for power users or people with special needs. If you press the space bar expecting to scroll the page, the page will not scroll because the focus is already in a form input field. Instead, youâll type a space in the field. If you focus a different input field while the page is still loading, the siteâs autofocus script may âhelpfullyâ move the focus back to the original input field upon completion, disrupting your flow and causing you to type in the wrong place.
Because the autofocusing is done with JavaScript, it can be tricky to handle all of these edge cases, and there is little recourse for people who donât want a web page to âstealâ the focus.
To solve this problem, HTML5 introduces an autofocus
attribute on all web form
controls. The autofocus
attribute does exactly what it says on the tin: as soon as the page loads,
it moves the input focus to a particular input field. But because itâs
just markup instead of script, the behavior will be consistent across all
websites. Also, browser vendors (or extension authors) can offer users a
way to disable the autofocusing behavior. Table 9-2 shows which browsers support
autofocus.
Table 9-2. Autofocus ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.