自动对焦不适用于输入字段 [英] Auto focus is not working for input field

问题描述

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

在该弹出窗口中，我需要在登录输入字段中使用默认自动对焦。我可以用HTML5 / CSS来实现吗？

jsfiddle

 < div class =main> 
< div class =panel> < a href =＃login_formid =login_poponclick =>登录< / a> 
 
< / div> 
< / div> 
<！ -  popup form＃1  - > < a href =＃xclass =overlayid =login_form>< / a> 
 
< div class =popup> 
< h2>欢迎访客！< / h2> 
 
< p>请在此输入您的登录名和密码< / p> 
< div> 
< label for =login>登录< / label> 
< input type =textid =loginvalue =autofocus /> 
< / div> 
< div> 
< label for =password>密码< / label> 
< input type =passwordid =passwordvalue =/> 
< / div> 
< input type =buttonvalue =Log In/> < a class =closehref =＃close>< / a> 
 
< / div> 
  

解决方案

我会以 UnskilledFreak 提到的JavaScript为单位，在每个klick上设置焦点

  ... 
< a href =＃login_formid =login_poponmouseup = document.getElementById（'login'）。select（）;>登录< / a> 
 ... 
<！ - 不需要javascript库 - > 
<！ - 在Win7和Chrome 37+上测试 - > 
  

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

更新：

这有点怪，但你可以尝试

  ... 
  ... 
< input type =textid =loginvalue =autofocus /> 
 ... 
< a class =closehref =PATH-TO-FILE？c = 2＃close>< / a> 
 ... 
<！ - 在Win7和Chrome 37+上测试 - > 
  

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

这个工作在JSFIDDLE， 现实世界。

更新2：

  ... 
< a href =＃login_formid =login_poponmouseup =setTimeout {document.getElementById（'login'）。focus（）}，10）;>登录< / a> 
<！ - 在Win7和Chrome 37+上测试 - > 
 ... 
  

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

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?

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>

解决方案

The Answer is not really effectively (with certainty).

I would sugest javascript, as UnskilledFreak mentioned, on every klick 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/

probably you should check key-input also, 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 the fiddle http://jsfiddle.net/6f9ge64f/6/

这篇关于自动对焦不适用于输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！