jquery的focus和blur事件的兼容性问题?

路人甲cw 2011-04-20 12:11:26
先把代码贴上来吧:

var IsVerifyCodeFocused;
var IsTxtVerifyCodeFocused;
$("#txtVerifyCode").focus(function () {
IsTxtVerifyCodeFocused = true;
if (document.getElementById("divVerifyCode")) {
$("#divVerifyCode").fadeIn();
}
else {
var imgVerifyCode = $("<div id='divVerifyCode' style='height:55px;background-color:#dff6c6;border:1px solid #bdde98;text-align:center;line-height:20px'><img alt='验证码' id='imgCode' src='BLL/VerificationCode.ashx' title='看不清楚,换一张' height='30px' width='70px' style='border:1px solid #aecaca;cursor:pointer;' /><br/><span id='spanChangeVerifyCode' class='ChangeVerifyCode'>点击更换验证码</span></div>");
$("body").append(imgVerifyCode);
var offset = $("#txtVerifyCode").offset();
var width = $("#txtVerifyCode").width();
var top = offset.top - $("#divVerifyCode").height() - 1;
var left = offset.left;
$("#divVerifyCode").css({ 'position': 'absolute', 'width': width + 'px', 'top': top + 'px', 'left': left + 'px' }).focus(function () {
IsVerifyCodeFocused = true;
}).blur(function () {
IsVerifyCodeFocused = false;
setTimeout("hideVerifyCode()", 0);
});
$("#imgCode").click(function () {
this.src = 'BLL/VerificationCode.ashx?tmp=' + new Date().getTime().toString(36);
});
$("#spanChangeVerifyCode").click(function () {
$("#imgCode").attr("src", "BLL/VerificationCode.ashx?tmp=" + new Date().getTime().toString(36));
}).mouseenter(function () {
this.className = 'ChangeVerifyCode ChangeVerifyCodeHover';
}).mouseout(function () {
this.className = 'ChangeVerifyCode';
});
}

}).blur(function () {
IsTxtVerifyCodeFocused = false;
setTimeout("hideVerifyCode()", 0);
});
function hideVerifyCode() {
if (document.getElementById("divVerifyCode")) {
if (IsVerifyCodeFocused || IsTxtVerifyCodeFocused) {
return;
}
$("#divVerifyCode").fadeOut();
}
}


在IE里面的效果正常:当输入验证码input获得光标时显示验证码,当失去光标时并且接下来的光标不在验证码上时隐藏验证码,同理如果验证码失去光标的同时,接下来的光标不在输入验证码input上则隐藏验证码.
但在FF4中$("#divVerifyCode").focus(function () {IsVerifyCodeFocused = true;})似乎没有效果,也就是说只要输入验证码input失去光标就会把验证码隐藏了,根本无法把光标移动到验证码上
...全文
274 点赞 收藏 4
写回复
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
路人甲cw 2011-04-21
为什么会出现这样的问题呢?
回复
toury 2011-04-20
FF4下可能是你的文本框和验证码图片之间有间隙了。这样试试:
<style>
*{margin:0px;padding:0px;}
</style>
</head>
回复
toury 2011-04-20
你用验证码图片的onmouseout()隐藏图片吧
回复
路人甲cw 2011-04-20
[Quote=引用 1 楼 toury 的回复:]

FF4下可能是你的文本框和验证码图片之间有间隙了。这样试试:
<style>
*{margin:0px;padding:0px;}
</style>
</head>
[/Quote]
我做了个测试,新建一个HTML静态页面:

<head>
<script type="text/javascript">
$("ipt").focus(function(){
alert("focus");
}).blur(function(){
alert("blur");
});
</script>
</head>
<body>
<input type="text" id="ipt" />
</body>

在IE下将光标移到文本框先触发alert("focus")而在FF4下先触发alert("blur")并且无法将光标移到文本框
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告