CODEWITHSUNDEEP
javascriptjquery
Hello-World
Hello-World

Reputation: 9555

focus event is ignored by another focus event

In the code below if the the text box is in focus then redDiv appears.

if the redDiv or its children are in focus then it must stay visible and only hide when it looses focus. Can you please help?

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

Upvotes: 1

Views: 153

Answers (1)

user1320635
user1320635

Reputation:

You need to check every time the div should be hidden if you criteria are met.

For example (I also set a 10 ms timeout to allow focus to switch before the element hides):

$(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

Upvotes: 1

Related Questions