如果单击顶部输入,则会显示红色方框。我如何停止它,当您单击红色块或其输入时,该块将隐藏。我的代码仅适用于Chrome,不适用于Firefox或ie。你能帮忙吗

http://jsfiddle.net/n9Mbh/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="js/libs/jquery-1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                var $txtMain = $('#txtMain');
                var $popupInput = $('#popupInput');
                var $popup = $('#popup');



                $popup.hide();

                $txtMain.focus(function() {$popup.show();});
                $popupInput.focus(function() {$popup.show();});
                $popup.focus(function() {$popup.show();});

                $txtMain.blur(function() {$popup.hide();});
                $popupInput.blur(function() {$popup.hide();});
                $popup.blur(function() {$popup.hide();});


            });
        </script>
    </head>
    <body>

        <br /><br />


        <input type="text" id="txtMain" />

            <div id="popup" style="width: 200px; height: 200px; background: none repeat scroll 0% 0% red;" tabindex="5"><br /><br />
                <input type="text" id="popupInput">
            </div>


                <br /><br />
                <br /><br />
                <br /><br />
                <br /><br />
                <br /><br />
                <br /><br />
                <br /><br />

        <input type="text" id="test"  />
</body>
</html>

最佳答案

1)问题是下面一行

$txtMain.blur(function() {$popup.hide();});


一旦将焦点放在$txtMain上,弹出框就会隐藏起来。

尝试这个

$txtMain.blur(function () {
                    if (!$('#popup').is(':visible')) {
                        $popup.hide();
                    }
                });


在Firefox中检查此Fiddle

希望您了解背后的逻辑。

关于javascript - 如何停止模糊关闭块,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19290766/

10-09 22:53