Question

如果单击顶部输入，则显示红色块。如何停止它，当您单击红色块或其输入时，块会隐藏。我的代码只适用于chrome但不适用于firefox或ie。你能帮忙吗

<!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>

Answer 1

1）问题是以下行

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

一旦焦点关注$txtMain，弹出窗口就会隐藏。

试试这个

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

在Firefox中查看此Fiddle

希望你理解背后的逻辑。

如何停止模糊关闭块

1 个答案: