Question

在下面的代码中，如果文本框处于焦点，则会出现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>

Answer 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);
});

Jsfiddle

焦点事件被另一个焦点事件忽略

1 个答案: