Question

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

我有2个文本框，txt1＆amp; 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 的无限循环，浏览器会挂起。

所以，我该如何处理呢？

Answer 1

您应该插入setTimeout以便在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();
    }
});

DEMO http://jsfiddle.net/SszUf/

Answer 2

试试这个

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

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

希望这能帮到你

Answer 3

$("#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>

Answer 4

显然，当您点击标签按钮时，会触发两个文本框的模糊事件。使用你的代码，当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();
            }
        });

Answer 5

这也是按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();
        }
    }
});

无限循环上的jquery文本框焦点事件

5 个答案: