1

一番上の入力をクリックすると、赤いブロックが表示されます。赤いブロックまたはその入力をクリックすると、ブロックが非表示になるのを止めるにはどうすればよいですか。私のコードはクロムでのみ機能しますが、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>
4

1 に答える 1

0

1）問題は以下の行です

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

フォーカスアウトする$txtMainと、ポップアップが非表示になります。

これを試して

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

Firefox でこのFiddleを確認してください

背後にあるロジックを理解していただければ幸いです。

于 2013-10-10T08:47:02.933 に答える