jquery 不关注元素

Question

我有以下代码来检查用户的文本是否不包含这两个禁止字符，并且它确实按照我想要的方式进行。问题是对于包含禁用字符的文本，我想在警报消失后专注于输入。但 css 样式已应用于输入。

我在这段代码中遗漏了什么？

$(".option, .fixed").blur(function(){
    var str = $(this).val();
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) {
        alert("The informatin you provided contains illegal characters( | : )");    
    }
    $(this).css('border','1px solid pink').focus();
});

Answer 1

您的代码在 blur 事件在 DOM 树中向上冒泡时执行，在它完全解析之前。只有当事件到达堆栈底部并由浏览器处理时，元素才会失去焦点。

如果您在该函数内部调用 .focus()，将执行 focus 操作，然后恢复 blur 操作, 原始输入最终会失去焦点。

在浏览器处理完 blur 后，您需要触发 focus。

您可以使用 setTimeout :

$(".option, .fixed").blur(function(){
    var str = $(this).val();
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) {
        alert("The informatin you provided contains illegal characters( | : )");    
    }
    $(this).css('border','1px solid pink');

    var that = this;
    setTimeout( function(){ $(that).focus() }, 0 );
});

---

但是，您应该意识到与此模式相关的问题:将 focus 给一个节点会触发另一个节点上的 blur，并导致一个奇怪的/损坏的gui 行为。

这是一个例子(jsfiddle here):

• 单击第一个输入，然后在其外部:您将看到所需的行为，
• 单击第一个输入，然后单击第二个:您将有一个无限的blur/focus 循环，以及一个无法使用的 gui。

避免这种情况的最简单方法是突出显示该字段、显示错误消息并让焦点成为焦点。