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

ylamdve6  于 2023-03-05  发布在  其他
关注(0)|答案(6)|浏览(350)

当我按下登录按钮时,显示一个弹出窗口。
在弹出窗口中,我需要默认的自动对焦登录输入字段。我可以用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>
wydwbb8l

wydwbb8l1#

autofocus被定义为只在页面加载时可靠地工作。它并不真正适合交换、打开或取消隐藏DOM元素的情况,例如在单页面应用程序框架中。您可能必须自己处理自动聚焦。

kmbjn2e3

kmbjn2e32#

    • 答案并不是真的有效(肯定)。**

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

以下是您的小提琴更新:* * 一个
您可能还应该检查不使用鼠标的用户的键输入。

    • 更新日期:**

有点老套但你可以试试

...    
<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是任何参数,只是为了激发一个reload.像这样,你可以使用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/**

cbwuti44

cbwuti443#

如果您使用的是jQuery,请执行以下操作:

$( "#login-button" ).click(function() {
    $( "#input" ).focus();
});
f4t66c6m

f4t66c6m4#

自动聚焦属性在页面加载时将焦点移动到指定的输入。在本例中,#input在DOM中显示但隐藏;点击登录按钮后,焦点被移除。
可能应该在登录单击事件处理程序上使用.focus()

<input type="text" id="login" value=""  />
 <input type="text" id="login" value="" autofocus />
 <input type="text" id="login" value=""  />

http://jsfiddle.net/6f9ge64f/4/

bqf10yzr

bqf10yzr5#

自动对焦只在标准页面加载时有效,如果你使用javascript/angular/react/jquery来修改元素,那么页面加载后活动元素会改变,自动对焦将无法工作。
我所做的是等待所有的dom元素加载和处理,然后设置活动元素

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

dohp0rv56#

我在过去遇到过同样的问题,我试图在onClick上使用querySelector,并在选定的输入上切换focus(),经过一些尝试,我使用setTimeout与它沿着,这让它工作,它是这样的

` setTimeout(  
                      () =>
                        (
                          document.querySelector(
                            '.some-input-field',
                          ) as HTMLElement
                        ).focus(),
                      200,
                    )`

相关问题