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!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    Ana Tudor&#8217;s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • By
    Introducing MooTools LazyLoad

    Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that...

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 …

  18. Haseeb

    HTML autofocus attribute is normally applied to form first input element to attract user’s for input or get the focus.

    http://www.thesstech.com/tryme?filename=autofocus

  19. Gokul

    autofocus on textarea is not working in Firefox it seems..!! Any idea why?

  20. Not sure why sometimes it does not work on Chrome :-(.

  21. Woot! This is indeed awesomeness!

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