Question

我正在尝试在按下按钮时关注用户名输入。我尝试过自动对焦，但这似乎不起作用。有什么建议吗？

我真的不想使用javascript（还没有！）但我知道我可能不得不这样做。

<a class="button" href="#popup1" accesskey="r"><img class="access" src="images/login.png" /></a>


<div id="popup1" class="overlay">
    <div class="popup">
        <div class="popup_header">
            <h2>Log In</h2>
                <a class="close" href="#" accesskey="w">×</a>
        </div>

        <div class="content">
            <section>
                <ul class="input-list cred clearfix">
                <form action="login.php" method="POST">
                    <li>
                        <input type="text" name="username" placeholder="Username">
                    </li>
                    <li>
                        <input type="password" name="password" placeholder="Password">
                    </li>
                    <li>
                        <input type="submit" name="submit" value="Sign In">
                    </li>
                </ul>
            </section>
        </div>      
    </div>

Answer 1

根据你弹出的标记，我可以建议这种方法来显示弹出窗口并聚焦输入（在这种情况下只有第一种类型的文本输入）：

$('a').click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    $(target).show();
    $($('input[type=text]', target).get(0)).focus();
})

Answer 2

autofocus works in IE10+, Chrome, FireFox - please test in other browsers  
but it works only on page load.
<input type="text" name="username" placeholder="Username" autofocus/>
Non supported browsers require JavaScript/Jquery to provide a focus on page
load.
focus on button click always require JavaScript/Jquery.

Answer 3

试试这个。

$（ “＃buttonid”）。单击（函数（）{

//put an id to your username inputbox
$("#username").focus();

}）;

Answer 4

如果没有javascript，你就无法做到这一点，你可以编写简单的内联javascript。

见下面的例子：

＆＃13;

a:focus, a:active {
    color: green;
}

＆＃13;

<form name="myform2">
<input type="text" name="mytextfield2">
<input type="button" name="mybutton" value="Set Focus" OnClick="document.myform2.mytextfield2.focus();">
</form>

＆＃13;

聚焦弹出输入字段

4 个答案: