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失去光标就会把验证码隐藏了,根本无法把光标移动到验证码上

...全文

367 4 打赏收藏转发到动态举报

写回复

用AI写文章

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")并且无法将光标移到文本框