如何不失焦于登录页面

我有一个简单的登录表单，带有2个输入字段：“用户名”和“密码”。默认为“用户名”字段。问题是，当用户点击“用户名”或“密码”字段外，焦点消失了（它既不在“用户名”也不在“密码”字段中）。我如何强制焦点位于这两个字段？只有如何不失焦于登录页面

在我而言，这是一个非常令人讨厌的行为，所以我真的想这样做:)

我可以这样做：

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

来源

2010-06-10 Misha Moroshko

+22

Eugh。请不要尝试这样做。如果用户想把焦点放在别的地方，让他们把它放在别的地方。 – Quentin 2010-06-10 14:14:34

也许这种非常恼人的焦点行为是你被要求做的事情，所以你没有什么权力去做别的事情，但是想一想：是否真的值得麻烦？它有用吗？甚至有必要？ – Humberto 2010-06-10 14:23:32

@Misha：欢迎编程一个Web应用程序！ – 2010-06-13 17:15:30

听起来像你总是希望你的输入之一是专注，公平的。我会这样做的方式是绑定每个输入事件，以便发生时它将转到下一个元素。

这里的标记：

<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(); 
});

来源

2010-06-16 16:43:07 artlung

+1这个概念，但jQuery的例子可能不那么复杂。 - 稍微干净的jQuery代码在http://www.jsfiddle.net/bKuUV/2/ – gnarf 2010-06-16 17:07:15

另外，命名/设置''的ID为'submit'可能会导致jQuery的问题'.submit（）'功能。 http://dev.jquery.com/ticket/6264 – gnarf 2010-06-16 17:11:25

我没有设置'input'的'id'来提交，所以这张票不相关。我的例子根本不使用'id's，我只是没有看到他们是如何回答这个问题所必需的。尽管我喜欢你使用'next（）'。另外，我不会使用'first（）'，但我也喜欢。 – artlung 2010-06-16 17:18:33

你可以使用javascript将焦点集中在focusout上，但你真的 shoudn't。强调关注这些字段会破坏页面的正常交互。这意味着用户无法做到像点击页面上的链接那样简单的事情，因为焦点始终在这些输入上。

请不要做:)

来源

2010-06-10 14:16:23

请看我更新的问题 – 2010-06-10 14:57:22

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

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

但认为这将使unacessible所有元素，除了通过键盘导航的两个输入字段（包括提交按钮，页面等的任何链接）

来源

2010-06-13 15:14:20 Tgr

设置blur事件处理程序，所以它带回集中到一个的投入。

来源

2010-06-13 16:54:54 Thevs

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

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

希望你得到它。

来源

2010-06-14 10:16:00 hellozimi

这不够好，因为如果用户输入用户名和密码，然后他想更改用户名，他不能因为焦点将在密码上。 – 2010-06-14 12:18:51

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

我也建议绑定返回在“用户名”为“将焦点设置密码”和返回在“密码”字段设置为“提交表单”。

来源

2010-06-15 11:26:29

你可以通过重新专注于您输入的最小时间间隔后启用链接的点击。

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

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

来源

2010-06-16 17:33:10 Iacopo

这只是一个想法，你可以使用setInterval函数把重心在用户名字段，你可以中断它，当你想用clearInterval功能。

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

...和interrumpt它，你可以做这样的事情

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

来源

2010-06-17 02:14:40 eos87

如何不失焦于登录页面

回答

相关问题