Auto focus is not working for input field

The Answer is not really effectively (with certainty).

I would suggest Javascript, as UnskilledFreak mentioned, on every click the focus is set

...    
<a href="#login_form" id="login_pop" onmouseup="document.getElementById('login').select();">Log In</a>
...
<!-- not javascript library needed -->
<!-- tested on Win7 and Chrome 37+ -->

Here is your fiddle updated: http://jsfiddle.net/6f9ge64f/2/

You should probably also check key-input for people that don't use a mouse.

Update:

it's a bit hacky, but you could try

...    
<a href="PATH-TO-FILE?c=1#login_form" id="login_pop" onmouseup="document.getElementById('login').select();">Log In</a>
...
<input type="text" id="login" value="" autofocus />
...
<a class="close" href="PATH-TO-FILE?c=2#close"></a>
...
<!-- tested with on Win7 and Chrome 37+ -->

where the PATH-TO-FILE is for example http://www.test.com/default.html (absolute or relative), and the ?c=1 and ?c=2 is any parameter, just to provoke a reload. like this you could use autofocus.

THIS WONT WORK IN JSFIDDLE since the HTML is embedded, but it works in the "real-world".

Update 2:

...
<a href="#login_form" id="login_pop" onmouseup="setTimeout(function(){document.getElementById('login').focus()},10);">Log In</a>
<!-- tested with on Win7 and Chrome 37+ -->
...

Here is the fiddle http://jsfiddle.net/6f9ge64f/6/


autofocus is defined to work reliably only on page load. It is not really suited for situations where you are swapping, or opening, or unhiding DOM elements such as in a single-page application framework. You are likely to have to resort to handling the autofocusing yourself.

Tags:

Html

Css