无限循环上的jQuery文本框焦点事件
[英]jquery textbox focus event on infinity loop
问题描述
我正在使用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的无限循环，一个和浏览器的焦点事件火都被挂起。
那么，我该如何处理呢？
5 个解决方案
解决方案1
1 2013-10-18 11:25:33
您应该插入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();
}
});
解决方案2
0 2013-10-18 11:09:01
尝试这个
<input type="text" id="txt1" />
<input type="text" id="txt2" />
$("#txt2").focus(function () {
if ($("#txt1").val() == "") {
$("#scarriername").show();
$("#txt1").focus();
}
//alert(1);
});
希望这对你有帮助
解决方案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();
}
});
只需添加一条线就可以解决这个问题
顺便说一句， #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>
解决方案4
0 2013-10-18 11:26:29
显然，当您按下选项卡按钮时，将触发两个文本框的模糊事件。 使用您的代码，当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();
}
});
解决方案5
0 2013-10-18 11:35:54
这也是解决按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中文本框的模糊事件后焦点不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.