Question

我有一个文本域<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>

Answer 1

这只是一个错字。变化：

$(this).foucus();

要：

$(this).focus();

此外，您可能希望通过在文本框中调用select来让用户更轻松地纠正错误。这样，他们可以再次开始输入以更改值：

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

这是working example。

注意：这个答案解决了手头的问题，即问题。在更广泛的范围内，我同意其他人说不应该将用户锁定在一个字段中。更好的方法是在提交时验证整个表单，让用户看到所有问题并立即修复所有问题，而不是在整个过程中对其进行窃听。

Answer 2

该活动应该是blur您正在寻找的。而你原来的jsfiddle有一个拼写错误（.foucus而不是焦点）

正如评论者所说，访客不会喜欢这种行为。

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

Answer 3

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


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

Answer 4

而不是$(this).focus()，请使用$(this).trigger('focus');。该活动应为blur，而不是focusout。

编辑：哦，focus()也可以使用：）

如何使用jQuery和JavaScript防止文本域失去焦点？

4 个答案: