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操作将恢复，原始输入最终会失去焦点。< / p>

浏览器处理focus后，您需要设置blur触发器。

您可以使用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。

避免这种情况的最简单方法是突出显示该字段，显示错误消息，然后关注焦点。

Answer 2

对LeGEC的解决方案有一点点适用于我的案例：

$(".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 );
    }else{
        $(this).css('border','1px solid #ccc');
    }
});

jquery不会关注元素

2 个答案: