Как не потерять фокус на странице входа - PullRequest
Новая
       3

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

7 голосов
/ 10 июня 2010

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

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

Могу ли я сделать что-то вроде: 

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

?

Ответы [ 8 ]

8 голосов
/ 16 июня 2010

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

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

Пожалуйста, не делайте этого

2 голосов
/ 13 июня 2010

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

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

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

0 голосов
/ 17 июня 2010

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

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

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

$('#password').focus(function(){ clearInterval(A);});
0 голосов
/ 16 июня 2010

Вы можете разрешить переход по ссылкам, переориентировав свои входные данные через минимальный промежуток времени.

Каждый раз, когда объект получает фокус, вы проверяете, имеет ли он необходимый класс: если не установлен фокуск первой форме ввода;таким образом: 

<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 голосов
/ 15 июня 2010

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

Я также предлагаю связать Возврат в поле «имя пользователя» для «Установить фокус на пароль» и Вернуть в поле «пароль» для «Отправить форму».

0 голосов
/ 14 июня 2010

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

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

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

0 голосов
/ 13 июня 2010

Установить blur обработчик событий, чтобы вернуть фокус на один из ваших входов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...