无限循环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的空值或空白值。由于FOCUS的无限循环，两个&浏览器的焦点事件失败。

那么，我该如何处理？

来源

2013-10-18 Kvadiyatar

你想实现???什么... – Rex

这不是一个无限循环，每次输入失去焦点，你告诉它重新获得焦点，如果没有输入的值，所以你是什么期待？ – adeneo

我想....假设在TXT1我没有输入任何值，并按Tab键。我会得到errormsg＆我的重点应该在txt1框。而不是txt2。 – Kvadiyatar

试试这个

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

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

希望这有助于你

来源

2013-10-18 11:09:01 shivam

不会。如果他为txt1焦点添加相同的条件也会导致无限循环 – Gowsikan

我有更多的20个文本框......所以，它不可能为每个人设置此条件。用户可以跳转到txt1到通过鼠标txt5 ...在那个时候它将不会工作。 – Kvadiyatar

$("#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-18 11:22:11 xhg

你在这边测试过这个东西吗？我不这么认为，它应该工作，而且我测试它....没有希望... :( – Kvadiyatar

加油，我编辑我的答案，并上传我的代码，现在就测试它！我测试了4个文本框 – xhg

你应该以设定blur事件焦点后插入一个setTimeout。

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

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/

来源

2013-10-18 11:25:33

很显然，当你按下TAB键就触发blur事件两个文本框。当你的代码在txt1变得模糊并且没有内容的时候，你将注意力集中在txt1上，但是当你这样做的时候，你也会触发txt2的blur事件，并且因为它没有任何文本，所以你的焦点回到txt2。这继续前进，重点在txt1，然后txt2，然后txt1，然后txt2 ...你可以把一个简单的如果检查第二个模糊事件处理程序，看看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-18 11:26:29

我有更多的20个文本框...所以，它不可能为每个人设置这个条件。可能的用户可以通过鼠标跳转txt1到txt5 ...在那个时候它将不起作用。 – Kvadiyatar

然后可能你应该当用户尝试提交表单时，请检查所有这些信息， –

这也是按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-18 11:35:54 Gowsikan

这里，返回false ....它会做什么？... bcoz我测试it.nothing碰巧.. – Kvadiyatar

返回false阻止选项卡导航。所以光标将保留在当前的输入框中，而不是聚焦到下一个 – Gowsikan

这里是小提琴链接http://jsfiddle.net/2y3s4/ – Gowsikan

无限循环jQuery文本框焦点事件

回答

相关问题