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

问题

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.

回答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.

回答2:

The following code from your current example:

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

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

Is going to cause an infinite loop of alerts going from 1 to 2

[eidt]

because: (this happens only in broswers that support autofocus )

input gets autofocus, fires event which fires an alert, alert grabs focus, click ok, input grabs focus, focus event fires new event triggering now two different alerts (DOM fully loaded now so new event is added with another alert), both alerts grab focus, click ok, click ok, input grabs focus fires new event triggering now two different alerts, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events...

Textual description of an infinite process FTW!....? :P

[/edit]

In your previous examples with two auto-focuses applied it seems that the last one will be executed as in the example I have attached at the bottom. I also added a way of adding a focus event to each input based on a class name... Not sure if you're looking for that but though it might be of some help.

JSFiddle Example of onfocus event