Treehouse

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!

ydkjs-5.png

Recent Features

  • CSS vs. JS Animation: Which is&nbsp;Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native...

  • Chris Coyier&#8217;s Favorite CodePen&nbsp;Demos

    Chris Coyer's incredible CodePen is much more than your typical code'n'share site. CodePen features the end result more than the code, provides loads of collaboration tools, and seems to be pushing new features every week. But what...

  • 9 Mind-Blowing Canvas&nbsp;Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here...

Incredible Demos

  • MooTools Link&nbsp;Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2,...

  • CSS content and&nbsp;attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar...

  • Facebook Sliders With Mootools and&nbsp;CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right...

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

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

Use Code Editor