如何不失焦於登錄頁面

我有一個簡單的登錄表單，帶有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

如何不失焦於登錄頁面

回答

相關問題