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.