Onfocus is not called when using the autofocus attribute on the input tag

Question

In the following example, I get only one warning window. I read that the focus is on before the JavaScript code is executed. Is there any way to make this work?

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

(I tested this only in Safari)

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

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

But it looks ugly compared to adding an event listener.

Edit:

Don't worry about the lack of browser support for the autofocus attribute. It was easily resolved, as I already did in my scripts. I also see a better solution to the problem. My question is, can I do this less ugly than just call the listener manually.

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

It works fine in Firefox 3.6 because Firefox does not support autofocus. But Safari, which supports autofocus, doesn't call an event.

Answer 1

From HTML5 working draft :

There should not be more than one element in a document using autofocus .

So, you still ask for undefined behavior.

With just one autofocus element in Firefox 3.6, none of the handlers are called when the page loads. Manually, giving focus to the element, the call of both handlers (then it goes into an endless loop due to warning boxes that return focus back to the element when closing).

The HTML5 project says autofocus should follow the focusing steps when loading the page, including raising the focus event, but the chances are that browsers do not currently implement this function in full or in sequence.

You might want to explicitly call your focus event handler while the page is loading, until the HTML5 specification ends and the browsers begin to aim for full support.

Answer 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> 

Will trigger an endless loop of warnings going from 1 to 2

[Eidt]

because: (this only happens in browsers supporting autofocus )

the input receives autofocus, the event that triggers the warning is triggered, the warning captures focus, clicks ok, the capture input focus, the focus event triggers a new event, now triggering two different warnings (the DOM is fully loaded, so a new event is added with another warning) both warnings capture the focus , click “OK”, click “OK”, “Input” will capture focus, fire a new event, now causing two different warnings, capture capture focus, click “OK”, next warning capture Focus on, press “OK”, input capture focus, trigger both events, click “OK”, the next warning will capture focus, click “OK”, “Take focus capture”, “Burn”, “Activate focus capture”, “OK” , “Confirm”, “Confirm”, “Confirm”, “Confirm”, “Paste”. focus capture warning, press “OK”, “capture input focus”, “fire”, “fire” and “event”, “capture focus input”, “fire”, “fire”, “fire”, “warning”, “ click "," next "," focus capture "," OK "," input focus capture ", both events are triggered, attention capture focus, click" OK ", the next warning will capture focus, click" OK ", enter focus capture, fire both events, input capture focus, both events are triggered, attention capture focus, click “OK”, the next warning captures focus, click “OK”, focus capture input, fires both events ...

Textual description of the endless FTW process! ....?: P

[/ edit]

In your previous examples using two automatic tricks, it seems that the latter will be executed, as in the example that I attached below. I also added a way to add a focus event to each input based on the class name ... Not sure if you are looking for this, but although this may bring some help.

JSFiddle onfocus event example

Answer 3

You need to give value to autofocus.
<input id="i" type="text" onfocus="alert(1)" autofocus="">

Answer 4

If you need to execute part of the javascript code, onfocus for input , you can use jQuery: http://api.jquery.com/focus/