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

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

javascript jquery html

Javascript 无限循环上的jquery文本框焦点事件,javascript,jquery,html,Javascript,Jquery,Html,我正在使用jquery验证textbox值我有两个文本框，txt1和txt2。现在，我编写了一个jquery函数 $("#txt1").blur(function () { if ($("#txt1").val() == "") { $("#scarriername").show(); $("#txt1").focus(); } else {

我正在使用jquery验证textbox值

我有两个文本框，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以null或空白值转到txt2时。由于焦点的无限循环，一个浏览器和浏览器的焦点事件触发将挂起

那么，我该如何处理呢？

试试这个

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

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


$（“#txt2”）.focus（函数（）{
if（$（“#txt1”）.val（）=“”）{
$（“#scarriername”）.show（）；
$（“#txt1”）.focus（）；
} 
//警报（1）；
});

希望这对你有帮助

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



$（函数（）{
$（“输入”）.blur（函数（）{
if（$（this）.val（）==“”）{
document.getElementById（“h1”）.innerHTML+=“123”；
$（this.focus（）；
}     
});});

您应该插入

设置超时

，以便在

模糊

事件后设置焦点

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

演示

显然，当您点击tab按钮时，会触发两个文本框的模糊事件。当txt1变得模糊且没有内容时，您的代码会将焦点放在txt1上，但当您这样做时，您也会触发txt2的模糊事件，因为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();
            }
        });

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

你想实现什么？…这不是一个无限循环，每次输入失去焦点时，你都会告诉它如果没有输入值，就再次获得焦点，那么你期待什么呢？我想…假设在txt1上我没有输入任何值，然后按Tab键。我将得到errormsg&我的重点应该放在txt1框上。而不是txt2。这不正是它所做的吗？->@阿德内奥：这是我这边的工作。为什么,；他不在那里工作。这不是我的问题。如果他为txt1 focus添加相同的条件，它将导致无限循环，因为我有更多的thn 20文本框…所以，它；s不可能为每个人设置此条件。可能用户可以通过鼠标将txt1跳到txt5…那时它将不工作。我有更多的thn 20文本框…因此，它；it’不可能为每个人都设置此条件。可能用户可以通过鼠标将txt1跳到txt5…此时它将不起作用。那么可能是在用户尝试提交表单时您应该进行检查。一次检查所有的。你在你身边测试过这个东西吗？我不这么认为，它应该有效，而且我也测试了它……没有希望（来吧，我编辑我的答案，上传我的代码，现在就测试它！我测试了4个textboxreturn false阻止选项卡导航。因此光标将保留在当前输入框中，而不会聚焦到下一个输入框。）

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