Как не потерять внимание на страницу входа в систему
У меня есть простая форма входа в систему с 2 полями ввода: "имя пользователя" и "пароль". поле "имени пользователя" фокусируется по умолчанию. Проблема состоит в том, что, когда пользователь нажимает внешние поля "имени пользователя" или "пароля", фокуса не стало (это ни на "имени пользователя", ни на полях "пароля""). Как я могу вынудить фокус быть на этих 2 полях только?
В моем случае это - действительно раздражающее поведение, таким образом, я действительно хочу сделать это :)
Могу я делать что-то как:
$("*").focus(function() {
if (!$(this).hasClass("my_inputs_class")) {
// How to stop the focusing process here ?
}
});
?
8 ответов
Похоже, вы всегда хотите, чтобы один из ваших входов был сфокусированным, достаточно справедливо. Я бы сделал это так, чтобы связать каждое из ваших событий input 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();
});
Вы можете использовать javascript для установки фокуса на focusout, но на самом деле не стоит. Принудительная установка фокуса на эти поля нарушит нормальное взаимодействие страницы. Это будет означать, что пользователь не сможет сделать что-то простое, например, щелкнуть по ссылке на странице, потому что фокус всегда будет на этих вводах.
Пожалуйста, не делайте этого :)
Если вы действительно действительно хотите это сделать (и вам не следует) использовать delegate () вместо установки отдельного обработчика событий для каждого отдельного элемента HTML:
$('body').delegate('*', 'focus', function() {
if (!$(this).hasClass("my_inputs_class")) {
$('#username').focus();
return false;
}
});
Но учтите, что это сделает невозможными все элементы, кроме два поля ввода с помощью навигации с клавиатуры (включая кнопку отправки, любые ссылки на странице и т. д.)
Установите обработчик события blur , чтобы он возвращал фокус одному из ваших входов.
Установите обработчик onClick на элемент body (или div, занимающий большую часть страницы). Щелчок по div должен затем установить фокус на поле имени пользователя / пароля.
Я также предлагаю привязать Return в «имени пользователя» к «Установить фокус на пароль» и Return в поле «пароль» в «Отправить форму».
это только идея, вы можете использовать функцию setInterval, чтобы поместить фокус в поле имени пользователя, и вы можете прервать его, когда захотите, с помощью функции clearInterval.
var A = setInterval(function(){ $('#username').focus();}, 100);
... а чтобы прервать его, вы можете сделать что-то вроде этого
$('#password').focus(function(){ clearInterval(A);});
Вы можете сделать это (в псевдокоде):
if user || pass blured
if user.len > 0
pass.setFocus
else
user.setFocus
Надеюсь, вы поняли.
Вы можете разрешить переход по ссылкам, перефокусировавшись на вводимые данные через минимальный интервал времени.
Каждый раз, когда объект получает фокус, вы проверяете, имеет ли он требуемый класс: если нет, установите фокус на первый из входных данных формы; таким образом:
<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>