Jak nie tracić fokusu na stronie logowania

Mam prosty formularz logowania z 2 polami wejściowymi: "nazwa użytkownika" i "hasło". Pole "nazwa użytkownika" jest domyślnie ustawione. Problem polega na tym, że gdy użytkownik kliknie poza polami "nazwa użytkownika" lub "hasło", fokus zniknie (nie ma go ani w polach "nazwa użytkownika" ani w polach "hasło"). Jak mogę wymusić skupienie na tych 2 polach ? tylkoJak nie tracić fokusu na stronie logowania

W moim przypadku, jest to naprawdę irytujące zachowanie, tak naprawdę chcę to zrobić :)

Czy mogę zrobić coś takiego:

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

Źródło

2010-06-10 Misha Moroshko

+22

Eugh. Proszę nie próbuj tego robić. Jeśli użytkownicy chcą, aby fokus znajdował się gdzie indziej, niech mają go gdzie indziej. – Quentin

Może to bardzo irytujące zachowanie skupienia jest czymś, o co cię poproszono, więc nie masz siły, by zrobić inaczej, ale pomyśl: czy naprawdę jest to warte problemów? To jest użyteczne? Nawet konieczne? – Humberto

@Misha: Zapraszamy do programowania aplikacji internetowej! –

To brzmi jak ty zawsze chcesz, aby jeden z twoich danych wejściowych był skupiony, sprawiedliwy. Sposób, w jaki to zrobię, to powiązanie każdego z twoich wejść blur() zdarzeń, więc jeśli się pojawi, przejdzie do następnego elementu.

Oto markup:

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

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

Źródło

2010-06-16 16:43:07 artlung

+1 dla koncepcji, ale przykład jQuery może być nieco mniej złożony. - Nieznacznie czystszy kod jQuery na http://www.jsfiddle.net/bKuUV/2/ – gnarf

Również nazywanie/ustawianie identyfikatora '' na 'submit' może powodować problemy z jQuery' .submit() ' funkcjonować. http://dev.jquery.com/ticket/6264 – gnarf

Nie ustawiam 'id'' 'input' do przesłania, więc bilet nie jest istotny. Mój przykład nie używa w ogóle 'id', po prostu nie rozumiem, jak są one niezbędne do odpowiedzi na pytanie. Podoba mi się użycie 'next()'. Ponadto, nie używam 'first()' bardzo, ale też to lubię. – artlung

Mogłabyś użyj javascript, aby ustawić fokus na focusout, ale ty naprawdę shoudn't. Zmuszenie do skupienia się na tych polach przerwałoby normalną interakcję strony. Oznaczałoby to, że użytkownik nie mógłby zrobić czegoś tak prostego, jak kliknięcie linku na stronie, ponieważ nacisk byłby zawsze na te dane wejściowe.

proszę nie rób tego :)

Źródło

2010-06-10 14:16:23

proszę zobaczyć moje zaktualizowane pytanie –

Jeśli naprawdę naprawdę chcesz to zrobić (i nie należy) używać delegate() zamiast ustawiania oddzielny obsługi zdarzeń na każdym pojedynczym elemencie HTML:

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

jednak pod uwagę, że to uczyni unacessible wszystkie elementy z wyjątkiem dwóch pól wejściowych za pośrednictwem nawigacji klawiatury (w tym przycisk składać żadnych linków na stronie itp)

Źródło

2010-06-13 15:14:20 Tgr

Ustaw blur obsługi zdarzeń, dlatego przywraca ostrość jednego swoich wejść.

Źródło

2010-06-13 16:54:54 Thevs

Można zrobić tak (w kodzie psuedo):

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

Hope you get it.

Źródło

2010-06-14 10:16:00 hellozimi

To nie wystarczy, ponieważ jeśli użytkownik wprowadzi nazwę użytkownika i hasło, a następnie chce zmienić nazwę użytkownika, nie może, ponieważ fokus będzie na hasło. –

Zainstaluj element obsługi onClick na elemencie body (lub element div, który obejmuje większość strony). Kliknięcie elementu div powinno następnie ustawić fokus na polu nazwa użytkownika/hasło.

Proponuję także wiązać Return w „nazwa użytkownika” na „Ustaw ostrość na hasło” i Return w polu „Hasło” do „Złożenie”.

Źródło

2010-06-15 11:26:29

Można włączyć klikać na linki, ponownie skupiając się na ciebie wejść po minimalnym przedziale czasowym.

Za każdym razem, gdy obiekt uzyskuje fokus, sprawdza się, czy ma wymaganą klasę: jeśli nie, ustaw fokus na pierwsze z danych wejściowych formularza; w ten sposób:

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

Źródło

2010-06-16 17:33:10 Iacopo

jest to tylko pomysł, można użyć funkcji setInterval aby położyć nacisk w polu nazwy użytkownika i można go przerwać, gdy chcesz z funkcją clearInterval.

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

... i dla interrumpt nim, można zrobić coś takiego

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

Źródło

2010-06-17 02:14:40 eos87

Jak nie tracić fokusu na stronie logowania

Odpowiedz

Powiązane problemy