Как не потерять фокус на странице входа в систему

У меня есть простая форма входа с 2 полями ввода: "логин" и "пароль". поле "username" по умолчанию сфокусировано. Проблема в том, что когда пользователь нажимает вне полей "имя пользователя" или "пароль", фокус пропадает (он не находится ни на "имя пользователя", ни на "поле пароля"). Как я могу заставить фокус быть только на этих 2 полях ?

в моем случае это действительно раздражающее поведение, поэтому я действительно хочу это сделать:)

могу я что-то сделать например:

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

?

7
focus forms html javascript jquery

8 ответов

звучит как всегда хотите, чтобы один из ваших входов был сфокусирован, достаточно справедливо. Способ, которым я бы это сделал, - связать каждый из ваших входов 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();
});
8

вы можете использовать javascript для установки фокуса на focusout, но вы действительно shoudn't. Принудительное фокусирование на этих полях нарушит нормальное взаимодействие страницы. Это означало бы, что пользователь не может сделать что-то простое, как нажать на ссылку на странице, потому что фокус всегда будет на этих входах.

пожалуйста, не делай этого :)

7

Если вы действительно хотите это сделать (и вы не должны) использовать делегат() вместо установки отдельного обработчика событий для каждого элемента HTML:

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

но учтите, что это сделает недоступными все элементы, кроме двух полей ввода с помощью клавиатуры (включая кнопку отправки,любые ссылки на странице и т. д.)

2

Set blur обработчик событий, поэтому он возвращает фокус на один из ваших входов.

0

вы можете сделать так (в коде psuedo):

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

надеюсь, вы это понимаете.

0

установить onClick обработчик на body элемент (или div, который охватывает большую часть страницы). При нажатии на div следует установить фокус на поле Имя пользователя / пароль.

Я также предлагаю обязать возвращение в поле "username" на "установить фокус на пароль" и возвращение в поле " Пароль "для"отправить форму".

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

это только идея, вы можете использовать функцию setInterval, чтобы поместить фокус в поле username, и вы можете прервать его, когда захотите, с помощью функции clearInterval.

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

... и для interrumpt это, вы можете сделать что-то вроде этого

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