0

我正在使用 jquery 来验证文本框的值。

我有 2 个文本框，txt1 和 txt2。现在，我写了一个 jquery 函数。

 $("#txt1").blur(function () {

            if ($("#txt1").val() == "") {
                $("#scarriername").show();
                $("#txt1").focus();
            }
            else {
                $("#scarriername").hide();
            }

        });

        $("#txt2").blur(function () {

            if ($("#txt2").val() == "") {
                $("#sscaccode").show();
                $("#txt2").focus();
            }
            else {
                $("#sscaccode").hide();
            }
        });

现在，问题是。当我运行项目时。我的位置在 txt1 上，当你使用 Tab 转到 txt2 时，它的值为 null 或空值。由于FOCUS的无限循环，一个和浏览器的焦点事件触发都挂起。

那么，我该如何处理呢？

4

5 回答 5

1

您应该插入 asetTimeout以便在blur事件之后设置焦点。

其次，您应该插入一个信号量以避免循环（参见代码和注释）：

var status = "valid"; // semaphore

$("#txt1").blur(function (e) {

    // if we are in programmatically focus, ignore this handler
    if(status == "invalid") 
        return ;

     if ($("#txt1").val() == "") {
         $("#scarriername").show();

         // set semaphore
         status = "invalid";

         // use setTimeout in order to set focus in the right moment
         setTimeout(function() {$("#txt1").focus(); status = "valid"},0);
     }
     else {
         $("#scarriername").hide();
     }

 });

// same as txt1
$("#txt2").blur(function () {
    if(status == "invalid") 
        return ;
    if ($("#txt2").val() == "") {
        $("#sscaccode").show();
        setTimeout(function() {$("#txt2").focus(); status = "valid"},0);

    }
    else {
        $("#sscaccode").hide();
    }
});

演示http://jsfiddle.net/SszUf/

于 2013-10-18T11:25:33.650 回答
0 
$("#txt1").blur(function () {

            if ($("#txt1").val() == "") {
                $("#scarriername").show();
                if ($("input:focus").length == 0)
                $("#txt1").focus();
            }
            else {
                $("#scarriername").hide();
            }

        });

只需添加一行即可解决此问题

顺便说一句，#scarriername不应该是弹出窗口之类的东西，它会触发其他模糊事件

您可以测试以下文件：

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<input id="txt1"><input id="txt2"><input id="txt3"><input id="txt4">
<hr>
<h1 id="h1"></h1>
</body>
<script type="text/javascript">
$(function(){
$("input").blur(function () {
 if ($(this).val() == "") {
        document.getElementById("h1").innerHTML += "123";
        $(this).focus();
    }     
});});
</script>
</html>
于 2013-10-18T11:22:11.700 回答
0

显然，当您点击选项卡按钮时，您会触发两个文本框的模糊事件。使用您的代码，当 txt1 变得模糊并且没有内容时，您可以将焦点放在 txt1 上，但是当您这样做时，您也会触发 txt2 的模糊事件，并且由于其中没有任何文本，您会将焦点重新回到 txt2。这一直持续下去，专注于 txt1，然后是 txt2，然后是 txt1，然后是 txt2...您可以在第二个模糊事件处理程序上进行简单的 if 检查，以查看 txt1 是否仍然为空，如果是，请继续关注txt1 不允许客户端传递给 txt2：

 $("#txt1").blur(function () {

            if ($("#txt1").val() == "") {
                $("#scarriername").show();
                $("#txt1").focus();
            }
            else {
                $("#scarriername").hide();
            }

        });

        $("#txt2").blur(function () {

            if ($("#txt2").val() == "" && $("#txt1").val() != "") {
                $("#sscaccode").show();
                $("#txt2").focus();
            }
            else {
                $("#sscaccode").hide();
            }
        });
于 2013-10-18T11:26:29.863 回答
0

尝试这个

<input type="text" id="txt1" />
<input type="text" id="txt2" />

$("#txt2").focus(function () {
 if ($("#txt1").val() == "") {
        $("#scarriername").show();
        $("#txt1").focus();
    } 
    //alert(1);    
});

希望这对你有帮助

于 2013-10-18T11:09:01.307 回答
0

这也是解决按 Tab 键问题的方法之一。

$("#txt1").bind('keydown',function(e)
{
    if(e.keyCode == 9)
    {
        if ($("#txt1").val() == "") {
            $("#scarriername").show();
            return false;                
        }
        else {
            $("#scarriername").hide();
        }
    }
});
$("#txt2").bind('keydown',function(e)
{
    if(e.keyCode == 9)
    {
        if ($("#txt2").val() == "") {
            $("#sscaccode").show();
            return false;
        }
        else {
            $("#sscaccode").hide();
        }
    }
});
于 2013-10-18T11:35:54.847 回答