Question

我有一个简单的登录表单，其中包含2个输入字段：“username”和“password”。 “用户名”字段默认为焦点。问题是，当用户点击“用户名”或“密码”字段外，焦点消失了（既不是“用户名”也不是“密码”字段“）。如何强调焦点在这两个字段上？只是？

在我的情况下，这是一个非常烦人的行为，所以我真的想这样做：）

我可以这样做：

$("*").focus(function() {
    if (!$(this).hasClass("my_inputs_class")) {
        // How to stop the focusing process here ?
    }
});

Answer 1

听起来你总是希望你的一个输入能够集中，公平。我这样做的方法是绑定每个输入blur()事件，这样如果它发生，它将转到下一个元素。

这是标记：

<body>
<form method="POST" action=".">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" name="submit" />
</form>
</body>

这是jQuery：

$(document).ready(function() {
    // what are the named fields the user may focus on?
    var allowed = ['username', 'password', 'submit'];
    $.each(allowed, function(i, val) {
        var next = (i + 1) % allowed.length;
        $('input[name='+val+']').bind('blur', function(){
            $('input[name='+allowed[next]+']').focus();
        });
    });
    $('input[name='+allowed[0]+']').focus();
});

Answer 2

您可以使用javascript将焦点设置为焦点，但真的不应该。强制关注这些字段会破坏页面的正常交互。这意味着用户无法像点击页面上的链接那样简单，因为焦点总是在那些输入上。

请不要这样做：）

Answer 3

如果你真的想要这样做（你不应该），请使用delegate()而不是在每个HTML元素上设置单独的事件处理程序：

$('body').delegate('*', 'focus', function() {
  if (!$(this).hasClass("my_inputs_class")) {
    $('#username').focus();
    return false;
  }
});

但请注意，除了两个输入字段之外，这将使所有元素无法通过键盘导航（包括提交按钮，页面上的任何链接等）。

Answer 4

设置blur事件处理程序，使其重点关注您的一个输入。

Answer 5

你可以这样做（在伪代码中）：

if user || pass blured  
    if user.len > 0 
        pass.setFocus
    else
        user.setFocus

希望你明白。

Answer 6

在onClick元素（或覆盖大部分页面的div）上安装body处理程序。然后单击div应该将焦点设置在用户名/密码字段上。

我还建议将“用户名”中的返回绑定到“设置焦点密码”，将“密码”字段中的返回绑定到“提交表单”。< / p>

Answer 7

您可以在最短时间间隔后重新关注您的输入，从而启用点击链接。

每次对象获得焦点时，您都会检查它是否具有所需的类：如果没有将焦点设置为第一个表单输入;这样：

<html>
<head>
<title>Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
    <script type="text/javascript" >
    $(function() {
    $('*').focus(function() { var obj = this; setTimeout(function () {checkFocus(obj)}, 1)});
    })

    function checkFocus(obj) {
        if (!$(obj).hasClass('force_focus')){
            $('input.force_focus:first').focus()
        }
    }
    </script>
</head>
<body>
    <a href="http://www.google.com">Extrnal link</a>
    <form><div>
User: <input type="text" name="user" class="force_focus"/><br/>
Password: <input type="password" name="password" class="force_focus"/><br/>
Other: <input type="text" name="other" class=""/><br/>
<input type="submit" name="submit" value="Login" />
</div></form>
</body>
</html>

Answer 8

这只是一个想法，您可以使用setInterval函数将焦点放在用户名字段中，并且可以在需要时使用clearInterval函数中断它。

var A = setInterval(function(){ $('#username').focus();}, 100);

...并且为了实现它，你可以做这样的事情

$('#password').focus(function(){ clearInterval(A);});

如何不关注登录页面

8 个答案: