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

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

8 голосов
/ 02 октября 2011

У меня есть текстовое поле <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>

Ответы [ 4 ]

10 голосов
/ 02 октября 2011

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

$(this).foucus();

На: 

$(this).focus();

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

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

Вот рабочий пример .

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

4 голосов
/ 02 октября 2011

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

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

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

2 голосов
/ 05 декабря 2013 
$("#input").focus();


$("#input").blur(function() {
    setTimeout(function() { $("#input").focus(); }, 0);
});
0 голосов
/ 02 октября 2011

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

Редактировать: да ладно, focus() также будет работать

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

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

...