当我按下登录按钮时,会显示一个弹出窗口。
在该弹出窗口中,我需要在登录输入字段上进行默认自动对焦。我可以用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>
答案 0 :(得分:26)
autofocus
被定义为仅在页面加载时可靠地工作。它不适合您在单页应用程序框架中交换,打开或取消隐藏DOM元素的情况。您可能不得不自己处理自动对焦。
答案 1 :(得分:3)
自动对焦属性将焦点移动到页面加载时的指定输入。在这种情况下,#input存在于DOM中但隐藏;单击登录按钮时,焦点将被删除。
应该在登录点击事件处理程序
上使用.focus() <input type="text" id="login" value="" />
<input type="text" id="login" value="" autofocus />
<input type="text" id="login" value="" />
答案 2 :(得分:1)
答案并非真正有效(确定无误)。
我会建议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
。
自嵌入HTML以来,这个工作在JSFIDDLE中工作,但它适用于&#34;现实世界&#34; 。
更新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+ -->
...
答案 3 :(得分:1)
自动对焦仅适用于标准页面加载,如果您在页面加载后使用 javascript/angular/react/jquery 修改元素,则活动元素更改,自动对焦将不起作用。
我所做的是等待所有 dom 元素加载和处理,然后设置活动元素
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$("#input-field").focus();
}, 1500);
});
</script>
答案 4 :(得分:-1)
如果您正在使用jQuery,请执行以下操作:
$( "#login-button" ).click(function() {
$( "#input" ).focus();
});