当我按下登录按钮时,显示一个弹出窗口。
在弹出窗口中,我需要默认的自动对焦登录输入字段。我可以用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>
6条答案
按热度按时间wydwbb8l1#
autofocus
被定义为只在页面加载时可靠地工作。它并不真正适合交换、打开或取消隐藏DOM元素的情况,例如在单页面应用程序框架中。您可能必须自己处理自动聚焦。kmbjn2e32#
我建议使用Javascript,正如UnskilledFreak提到的那样,每次单击时都会设置焦点
以下是您的小提琴更新:* * 一个
您可能还应该检查不使用鼠标的用户的键输入。
有点老套但你可以试试
其中
PATH-TO-FILE
是例如http://www.test.com/default.html
(绝对或相对),和?c=1
和?c=2
是任何参数,只是为了激发一个reload.像这样,你可以使用autofocus
.这在JSFIDDLE中不起作用,因为HTML是嵌入式的,但它在**"真实世界"**中起作用。
这是小提琴**http://jsfiddle.net/6f9ge64f/6/**
cbwuti443#
如果您使用的是jQuery,请执行以下操作:
f4t66c6m4#
自动聚焦属性在页面加载时将焦点移动到指定的输入。在本例中,#input在DOM中显示但隐藏;点击登录按钮后,焦点被移除。
可能应该在登录单击事件处理程序上使用.focus()
http://jsfiddle.net/6f9ge64f/4/
bqf10yzr5#
自动对焦只在标准页面加载时有效,如果你使用javascript/angular/react/jquery来修改元素,那么页面加载后活动元素会改变,自动对焦将无法工作。
我所做的是等待所有的dom元素加载和处理,然后设置活动元素
dohp0rv56#
我在过去遇到过同样的问题,我试图在
onClick
上使用querySelector
,并在选定的输入上切换focus()
,经过一些尝试,我使用setTimeout
与它沿着,这让它工作,它是这样的