Как предотвратить потерю фокуса текстового поля с помощью jQuery и JavaScript?

у меня есть текстовое поле <input type="text"/> что я хочу проверить, когда фокус потерян. Если входные данные недопустимы, я хочу предотвратить перемещение фокуса к следующему элементу или, другими словами, сохранить фокус на недопустимом входе, пока он не будет действителен.

Как я могу это сделать с помощью jQuery и JavaScript?

Я пробовал с этим кодом, но он не работает (jsFiddle):

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(function() {
    $('.hello').bind('focusout', function(e) {
        if(!isValid($(this).val())) {
            e.preventDefault();
            $(this).foucus();
        }
    });
});

    function isValid(str) {
        if(str === "hello") {
            return true;
        } else {
            return false;
        }
    }
</script>
</head>
<body>
Only valid content: <b>hello</b><br>
<input type="text" class="hello"/>
<button>Dummy</button>
</body>
</html>
7
focus forms html javascript jquery

4 ответов

Это просто опечатка. Изменить:

$(this).foucus();

в:

$(this).focus();

кроме того, вы можете сделать его более легким для ваших пользователей, чтобы исправить свою ошибку, также позвонив select в TextBox. Таким образом, они могут просто начать печатать снова, чтобы изменить значение:

$(this).focus().select();

здесь пример работающего.

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

9

событие должно быть blur вы ищете. И ваш оригинальный jsfiddle имел опечатку (.foucus вместо фокуса)

и, как сказал комментатор, посетителям не понравится такое поведение.

http://jsfiddle.net/qdT8M/4/

4
$("#input").focus();


$("#input").blur(function() {
    setTimeout(function() { $("#input").focus(); }, 0);
});
2

вместо $(this).focus() используйте $(this).trigger('focus');. И событие должно быть blur, а не focusout.

Edit: Ну хорошо,focus() будет работать также :)

0