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

Question

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

9

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

- Jonas

您的访客会喜欢这个特性 :P 特别是当他们意外点击了输入框后，又不得不想办法验证该内容以恢复光标的情况。 - Šime Vidas

@Sime：是的，这将提高我的应用程序的可用性。该字段将默认为有效。 - Jonas

这是一个很好的例子，说明了jQuery使事情变得比必要的更加复杂。例如，使用本地JavaScript可以用不到一半的代码实现所需的行为：http://jsfiddle.net/qdT8M/2/ - aroth

2

@aroth 使用onevent属性和全局函数并不是一个好的替代方案。绑定事件处理程序无疑是jQuery这样的库的工作，原因是IE8没有实现W3C的事件API。 - Šime Vidas

@Šime Vidas - 关于全局函数，你说得很对。尽管当然，在本机解决方案中可以很容易地通过类似 window.myNamespace = {}; 然后执行 myNamespace.validate = ...; 这样的操作进行解决，这仍然可以使代码显着缩短。 - aroth

显示剩余2条评论

4个回答

4

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


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

- Otto Kanellis

4

事件应该是您要寻找的 blur。而您原来的 jsfiddle 中有一个错别字（.foucus 而不是 focus）。

正如评论者所说，访问者不会喜欢这种行为。 http://jsfiddle.net/qdT8M/4/

- Doozer Blake

谢谢，但是访问者会喜欢它，因为它提高了可用性。 - Jonas

1

@Jonas 我尊重地不同意你的观点。你让用户在输入100%有效数据之前无法离开该字段。也许他们还没有准备好填写该字段，也许他们不确定该填什么等等。如果你要锁定他们在该字段中，你最好非常清楚地说明需要什么。用户有时候很傻。 - Doozer Blake

所有字段默认都是有效的，没有将字段保持在无效状态的意义。最好让用户知道它是无效的，并直接让用户纠正它。 - Jonas

3

不，实际上并不更好，很烦人。确实需要验证字段，但应该在表单提交时进行，这样用户可以一次性处理所有问题。在网络上看看，其他好的网站都是这样做的，原因也很明显。 - FishBasketGordo

虽然我同意阻止用户离开一个字段并不理想，但有时由于要求（例如老板的要求）是不可避免的。此外，针对Dooser的观点，“用户很蠢”。留下无效的内容会让他们感到困惑（这两种情况都适用）。针对FishBasket的观点，我的界面是一个ajax界面。您离开一个字段，它会立即通过ajax保存。如果它是无效的，它需要立即被捕获。我希望有一种替代方法来保持用户在字段中，但数据可能会丢失，这比可用性错误更糟糕。空字段是有效的，所以有了这个逃生口。 - danielson317

0

使用$(this).trigger('focus');代替$(this).focus()。事件应该是blur而不是focusout。

编辑：噢，好吧，focus()也可以用 :)

- realshadow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FishBasketGordo · Accepted Answer

这只是一个错别字。请更正：

$(this).foucus();

收件人：

$(this).focus();

此外，您可能希望让用户更轻松地纠正他们的错误，方法是对文本框也调用select函数。这样，他们只需开始输入以更改值：

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

这里有一个可工作示例。

注意：此答案解决了问题，即所提出的问题。从更广泛的角度来看，我同意其他人的观点，即不应该将用户锁定在一个字段中。更好的方法是在提交表单时对整个表单进行验证，让用户看到所有问题并一次性解决它们，而不是在整个过程中打扰他们。