无限循环上的jQuery文本框焦点事件
[英]jquery textbox focus event on infinity loop
问题描述
i am using jquery to validate textbox value. 
我正在使用jquery来验证文本框值。
I have 2 textbox, txt1 & txt2. 我有2个文本框，分别是txt1和txt2。 now, i wrote a jquery function. 现在，我写了一个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();
}
});
Now, issue is. 现在，问题是。 when i run the project. 当我运行项目时。 my position is on txt1 and when u use Tab to go txt2 with null or blank value. 我的位置在txt1上，当您使用Tab键使用空值或空白值进入txt2时。 Focus event fire for both one & browser become hang due to infinite loop of FOCUS . 由于FOCUS的无限循环，一个和浏览器的焦点事件火都被挂起。
so, how can i handle it? 那么，我该如何处理呢？
5 个解决方案
解决方案1
1 2013-10-18 11:25:33
You should insert a setTimeout in order to set the focus after the blur event. 您应该插入setTimeout以便在blur事件之后设置焦点。
Second, you should insert a semaphore in order to avoid a loop (see code and comments): 其次，您应该插入一个信号量以避免循环（请参见代码和注释）：
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/ 演示http://jsfiddle.net/SszUf/
解决方案2
0 2013-10-18 11:09:01
try this 尝试这个
<input type="text" id="txt1" />
<input type="text" id="txt2" />
$("#txt2").focus(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
//alert(1);
});
hope this help you 希望这对你有帮助
解决方案3
0 2013-10-18 11:22:11
$("#txt1").blur(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
if ($("input:focus").length == 0)
$("#txt1").focus();
}
else {
$("#scarriername").hide();
}
});
Just add a line can solve this problem 只需添加一条线就可以解决这个问题
By the way, the #scarriername should not be something like popup window, which will trigger other blur events 顺便说一句， #scarriername不应类似于弹出窗口，它会触发其他模糊事件
You can test the file below: 您可以在下面测试文件：
<!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>
解决方案4
0 2013-10-18 11:26:29
Apparently when you hit the tab button you trigger blur event for both text boxes. 显然，当您按下选项卡按钮时，将触发两个文本框的模糊事件。 With your code when txt1 gets blurred and has no content you get the focus on txt1, but when you do that you also trigger the blur event for txt2 and since it does not have any text in it you get the focus back to txt2. 使用您的代码，当txt1变得模糊并且没有内容时，您将焦点放在txt1上，但是当您这样做时，还会触发txt2的blur事件，因为其中没有任何文本，您可以将焦点重新回到txt2上。 This keeps on going and going, focusing on txt1 and then txt2 and then txt1 and then txt2... You could put a simple if check on the second blur event handler to see if txt1 is still empty, and if so keep the focus on txt1 not allowing the client to pass to 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();
}
});
解决方案5
0 2013-10-18 11:35:54
This is also one of the approach to solve your problem on pressing tab key. 这也是解决按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();
}
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.