如何不在登录页面上失去焦点

Question

如何不在登录页面上失去焦点

7

我有一个简单的登录表单，包含两个输入字段：“用户名”和“密码”。默认情况下，“用户名”字段获得焦点。问题是，当用户点击“用户名”或“密码”字段之外时，焦点就会丢失（既不在“用户名”字段上，也不在“密码”字段上）。我该如何强制焦点仅在这两个字段上？在我的情况下，这是一种非常烦人的行为，所以我真的想这么做 :) 我能做类似以下的事情吗：

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

?

- Misha Moroshko

22

呃，不要尝试这样做。如果用户想将焦点放在其他地方，请让他们在其他地方放置。 - Quentin

这也会破坏很多基于文本的浏览器。不要强制焦点，总的来说，不要在用户界面上强制任何东西。 - user110763

2

我怀疑有很多基于文本的浏览器能够进行JavaScript事件处理。 - Tgr

如果用户想要点击登录按钮怎么办？又或者，甚至只是切换到它？足够多的用户只使用键盘（与鼠标交互很少），这将非常令人烦恼。 - NotMe

请确保页面上的所有链接和按钮也包含在允许聚焦项列表中，否则用户将无法使用键盘。 - Andrew Lewis

显示剩余2条评论

8个回答

7

您可以使用JavaScript在焦点移开时设置焦点，但您真的不应该这样做。强制设置焦点会破坏页面的正常交互。这意味着用户无法执行简单的操作，例如单击页面上的链接，因为焦点始终在那些输入框上。

请不要这样做 :)

- Bala Clark

2

如果您真的非常想这样做（但您不应该这样做），请使用 delegate() 而不是为每个单独的 HTML 元素设置一个单独的事件处理程序：

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

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

- Tgr

0

你可以在最少时间间隔后重新聚焦输入来启用链接点击。

每当一个对象获得焦点时，检查它是否具有所需的类。如果没有，则将焦点设置为表单输入中的第一个；这样：

<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>

- Iacopo

0

这只是一个想法，你可以使用 setInterval 函数在用户名字段中设置焦点，并且可以使用 clearInterval 函数随时中断它。

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

......而要中断它，您可以像这样做

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

- eos87

0

设置blur事件处理程序，以便将焦点返回到您的输入之一。

- Thevs

0

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

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

希望你明白了。

- hellozimi

这不够好，因为如果用户输入了用户名和密码，然后想要更改用户名，他无法做到，因为焦点将在密码上。 - Misha Moroshko

0

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

我还建议在“用户名”中绑定 Return 到“设置密码焦点”，在“密码”字段中绑定 Return 到“提交表单”。

- Aaron Digulla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- artlung · Accepted Answer

听起来你总是希望其中一个输入框保持聚焦，很好。我会这样做：绑定每个输入框的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();
});