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

focus event is ignored by another focus event

本文关键字：焦点 事件 另一个      更新时间：2023-09-26

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

满足条件，则需要每次检查是否应隐藏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);
});

杰斯菲德尔

相关文章：