Html 自动对焦不适用于输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27313872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto focus is not working for input field
提问by raghava goud
When I Press Login button one popup is shown.
当我按下登录按钮时，会显示一个弹出窗口。
In that popup I need default autofocus on Login Input field. Can I achieve that with HTML5/CSS only?
在那个弹出窗口中，我需要在登录输入字段上默认自动对焦。我可以仅使用 HTML5/CSS 来实现吗？
<div class="main">
<div class="panel"> <a href="#login_form" id="login_pop" onclick="">Log In</a>
</div>
</div>
<!-- popup form #1 --> <a href="#x" class="overlay" id="login_form"></a>
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" autofocus />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" /> <a class="close" href="#close"></a>
</div>
采纳答案by winner_joiner
The Answer is not really effectively (with certainty).
答案并不真正有效（肯定）。
I would suggest Javascript, as UnskilledFreakmentioned, on every click the focus is set
我建议使用 Javascript，正如UnskilledFreak提到的，每次点击都会设置焦点
...
<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/
这是你的小提琴更新：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
这有点hacky，但你可以试试
...
<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-FILEis for example http://www.test.com/default.html(absolute or relative), and the ?c=1and ?c=2is any parameter, just to provoke a reload. like this you could use autofocus.
PATH-TO-FILE例如，其中is http://www.test.com/default.html（绝对或相对），?c=1and?c=2是任何参数，只是为了引起重新加载。像这样你可以使用autofocus.
THIS WONT WORK IN JSFIDDLE since the HTML is embedded, but it works in the "real-world".
由于嵌入了 HTML，这在 JSFIDDLE 中不起作用，但它在“真实世界”中起作用。
Update 2:
更新 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/
回答by
autofocusis 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.
autofocus被定义为仅在页面加载时可靠地工作。它并不真正适用于交换、打开或取消隐藏 DOM 元素的情况，例如在单页应用程序框架中。您可能不得不自己处理自动对焦。
回答by Prabhu Suriya
Autofocus attribute moves the focus to the specified input on page load. In this case #input is present in DOM but hidden; on clicking login button, the focus is removed.
Autofocus 属性在页面加载时将焦点移动到指定的输入。在这种情况下，#input 存在于 DOM 中但被隐藏；单击登录按钮时，焦点将被移除。
Should probably use .focus() on the login click event handler
应该在登录点击事件处理程序上使用 .focus()
<input type="text" id="login" value="" />
<input type="text" id="login" value="" autofocus />
<input type="text" id="login" value="" />
回答by Klevis Miho
If you are using jQuery do something like this:
如果您使用 jQuery，请执行以下操作：
$( "#login-button" ).click(function() {
$( "#input" ).focus();
});
