自动对焦不适用于输入字段

Question

当我按下登录按钮时,会显示一个弹出窗口.

在该弹出窗口中,我需要在登录输入字段上进行默认自动对焦.我能用HTML5/CSS实现吗？

的jsfiddle

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

Answer 1

autofocus被定义为仅在页面加载时可靠地工作.它不适合您在单页应用程序框架中交换,打开或取消隐藏DOM元素的情况.您可能不得不自己处理自动对焦.

Answer 2

答案并不是真正有效（肯定）。

我建议使用 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+ -->

这是您的小提琴更新：http://jsfiddle.net/6f9ge64f/2/

您可能还应该检查不使用鼠标的人的按键输入。

更新：

这有点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+ -->

PATH-TO-FILE例如，其中是http://www.test.com/default.html（绝对或相对），并且?c=1是?c=2任何参数，只是为了引发重新加载。像这样你可以使用autofocus.

这在 JSFIDDLE 中不起作用，因为 HTML 是嵌入的，但它在“现实世界”中起作用。

更新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+ -->
...

这是小提琴http://jsfiddle.net/6f9ge64f/6/

Answer 3

自动对焦仅适用于标准页面加载，如果您在页面加载后使用 javascript/angular/react/jquery 修改元素，则活动元素会发生变化，并且自动对焦将不起作用。

我所做的是等待所有 dom 元素加载和处理，然后设置活动元素

<script type="text/javascript">
   $(document).ready(function() {
      setTimeout(function() {
          $("#input-field").focus();
      }, 1500);
   });
</script>