O'Reilly

HTML5 autofocus Attribute

By on  

HTML5 threw a whole bunch of awesomeness at us. Tasks we accomplished with JavaScript and Flash, like basic form validation, INPUT placeholders, client side file naming, and audio/video, can now be completed using basic HTML. Another simple functionality HTML now allows us is auto-focusing on elements upon page load; this is accomplished using the autofocus attribute.

The code is as simple as it gets:

<!-- These all work! -->
<input autofocus />
<button autofocus>Hi!</button>
<textarea autofocus></textarea>

When the autofocus attribute is present, the INPUT, TEXTAREA, or BUTTON element is automatically selected upon page load. I experimented with display elements (H1 tag) and a tabIndex of 0, but autofocus did not work for them.

This attribute is especially useful on pages whose main purpose is collecting information, like Google's homepage (search is the use 99% of the time) or even an online guided installer (like WordPress' installer). And best of all -- no JavaScript needed!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • Implement jQuery&#8217;s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

  • Sara Soueidan&#8217;s Favorite CodePen Demos

    A few months ago, Chris Coyier shared his favourite CodePen demos right here on David’s blog. A while back David asked me to share some of my favourite pens too, so here are some of the demos that have blown my mind in the past...

Discussion

  1. For those interested, autofocus is currently not supported in Safari Mobile for iOS 5.x or Android’s browser app (2.3 and below, not sure on support in newer versions).

    Information found at http://wufoo.com/html5/attributes/02-autofocus.html

  2. jonathan 2 M

    Also READONLY is a funny attribute for input, it disallow the input to be writtable.

  3. I just did a little testing and Chrome actually focuses on elements that have the autofocus attribute and are injected via JavaScript… But FF and IE don’t.

    Not sure if that’s part of the spec or not, but it’s there.

  4. David

    You’re always full of “nice to know” stuff that we can use in our everyday coding. Thanks!

  5. The implementation of the feature is a little “magical” in some browsers, but I hope it will be all right in future.

  6. In fact, it’s even simpler than that! Rather than using an attribute you can use a flag with the HTML5 doctype:

    Hi!

  7. In fact, it’s even simpler than that! Rather than using an attribute you can use a flag with the HTML5 doctype:


    Hi!

  8. Sorry, tried wrapping it in code tag but to no avail!

  9. The historical problem with autofocus is that it acts on “load” event. If in the meanwhile you started interacting with the browser url bar or any other input in the page, it moves the focus away and you gonna end up writing shenanigans. As example, you start typing your password in input 2 but the page set autofocus on input 1 … when the focus is stolen from input 2 you might end up writing amd showing to everyone your password without realizing the focus changed.

    Unless browsers vendors implement a way to prevent this, as soon as the user start interacting with the page the autofocus attribute should be removed.

    !function(html, autofocus){
    function drop() {
      for(i = 0; i < event.length; html.removeEventListener(event[i++], drop, true));
      document.querySelector(
        "[" + autofocus + "=" + autofocus + "]"
      ).removeAttribute(autofocus);
    }
    for(var
      event = "touchstart mousedown scrool mousewheel".split(" "), // etc
      i = 0; i < event.length; i++
    ) {
      html.addEventListener(event[i], drop, true);
    }
    }(document.documentElement, "autofocus");
    

    or something like that …

  10. However I personally don’t like autofocus on certain sites – and it especially annoy me at Google’s homepage – because it messes up a possibility to return to previous page with the [backspace].

    • Alex

      Alt + Left/Right

      Hope Gnome would accept the same shortcuts…

  11. Rusty

    @Andrea Giammarchi – which browsers in your opinion implement autofocus in onload? Tried in FF, Chrome and Opera, autofocus activates immediately. IE doesn’t support autofocus at all. So I’m curious to know which browser implements it incorrectly that would require your workaround.

  12. Jeff

    Rusty, try http://caniuse.com

  13. Little tips like this make a huge difference in day-to-day development!

  14. Hi,

    I have an input type=number, which should be focused when the page loads…it works just fine in my desktop browser, but in my mobile device, it doesn’t! I mean, once the page loads, it should focus the input and show the virtual(touchable) keyboard(better fit for numbers), but the keyboard is not shown!
    even if I try to focus it via javascript using the page load event, it doesn’t work :/
    the weird thing is that, if I change the input type to text, it works!

    any idea?!

  15. patomas

    Hi

    Has anybody ever had the need to change the focus of an input field on load? If, have you considered that the form could have been badly designed?

    Bye

  16. federico lanusse

    Note for the security pen testers (like I’m), the combination of onfocus + autofocus open a new territory for XSS’s attacks

  17. Sorry, my badx2! Let’s try again …
    I’m looking for a solution to this dilemma …
    When autofocus is used on a form input element on a one-page site (using section navigation), autofocus is never implemented (or should I say “is lost”) because the user changed the focus when he clicked a menu tag in the header …

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...