1

在下面的代码中，如果文本框处于焦点位置，则会出现 redDiv。

如果 redDiv 或其子元素处于焦点位置，则它必须保持可见，并且只有在失去焦点时才会隐藏。你能帮忙吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="jquery-1.8.2.min.js"></script>

    <script type="text/javascript">


        $(document).ready(function () {

            var onetxt = $('<input type="text" />');

            var Input1 = $('<input type="text" />');

            var redDiv = $('<div>', { tabindex: "5", style: "width:200px;height:200px;background:red; display:none;", text: 'test', html:"<br /><br />" }).append(Input1);





            onetxt.focusin(function () {
                redDiv.show();
            });
            Input1.focusin(function () {
                redDiv.show();
            });
            redDiv.focusin(function () {
                redDiv.show();
            });


            onetxt.blur(function () {
                redDiv.hide();
            });






            $('#myarea').after(onetxt,redDiv);

        });



    </script>

</head>
<body>

    <div id="myarea"></div>

</body>
</html>
4

1 回答 1

1

如果满足您的条件，您需要在每次隐藏 div 时检查。

例如（我还设置了 10 毫秒的超时时间以允许焦点在元素隐藏之前切换）：

$(document).ready(function () {
    var hider = null;
    var onetxt = $('<input type="text" />');
    var Input1 = $('<input type="text" />');
    var redDiv = $('<div>', {
        tabindex: "5",
        style: "width:200px;height:200px;background:red; display:none;",
        text: 'test',
        html: "<br /><br />"
    }).append(Input1);

   function hideRed () {
       if (!onetxt.is(':focus') && !Input1.is(':focus') && !redDiv.is(':focus')) {
           hider = setTimeout(function () {redDiv.hide();}, 10);
       }
    }

    function showRed () {
        if (hider !== null) {
            clearTimeout(hider);
            hider = null;
        }
        redDiv.show();
    }

    onetxt.focusin(showRed);
    Input1.focusin(showRed);
    redDiv.focusin(showRed);

    redDiv.blur(hideRed);
    Input1.blur(hideRed);
    onetxt.blur(hideRed);

    $('#myarea').after(onetxt, redDiv);
});

提琴手

于 2013-10-08T14:10:13.813 回答