onfocus is not called when using the autofocus attribute on an input tag

Question

In the following example, I get only one alert box. I read that the focus is put before the JavaScript code is executed. Is there a way to get this to work on?

<input id="i" type="text" autofocus onfocus="alert(1)">

<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
    alert(2);
}, false);
</script>

(I have only tested this in Safari)

Edit: I can obviously do it this way (Prototypejs selector):

var autofocusElement = $$('input[autofocus]')[0];
callListener(autofocusElement);

But it looks ugly compared to only add an event listener.

Edit:

Do not worry over a lack of browser support for the autofocus attribute. It solved easily as I have done in I fiddle links to below. There is also the best solution to the problem as I can see. My question is if I can do it in a less ugly than having to call the listener manually.

http://jsfiddle.net/tellnes/7TMBJ/3/

It works fine in Firefox 3.6 since Firefox does not support autofocus. But in Safari, which supports autofocus, are not the event called.

Answer 1

From the HTML5 working draft:

There must not be more than one element in the document with the autofocus attribute specified.

So you're asking for undefined behavior anyway.

With only one autofocus element, under Firefox 3.6, neither of the handlers get called on page load. Manually giving the focus to the element calls both handlers (then proceeds into an infinite loop, due to the alert boxes giving the focus back to the element when closing).

The HTML5 draft does say that autofocus should perform the focusing steps on page load, including raising the focus event, but chances are that browsers are not currently implementing that feature in a complete or consistent manner.

You might want to explicitly call your focus event handler during page load until the HTML5 spec is finished and browsers start aiming for complete support.