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-2.png

Recent Features

Incredible Demos

  • MooTools Typewriter Effect Plugin Upgrade

    Last week I shared my MooTools Typewriter Class with you. It was pretty well received and I got a few feature requests that I've implemented including "backspacing" and character variance delays. I'm not going to explain the old code, so click here...

  • Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

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!