1

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>
Hello-World
  • 9,277
  • 23
  • 88
  • 154
  • possible duplicate of [Make focusout event ignore some elements](http://stackoverflow.com/questions/19242391/make-focusout-event-ignore-some-elements) – CBroe Oct 08 '13 at 14:21

1 Answers1

1

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

  • Have you tried the exact example? If it works at jsfiddle it will work where ever you put it because it run the same way in the browser. –  Oct 09 '13 at 10:17
  • hi yes, I did and in jsfiddle it works fine but so does my example. if I run it on my pc it wont . thanks – Hello-World Oct 09 '13 at 10:40
  • Then you are doing something very wrong. JavaScript runs on the client side, so the server it is hosted on does not affect how it runs. –  Oct 09 '13 at 11:08
  • if you test it on your local then you will see. i know its really weird thats why I posted the question . thanks – Hello-World Oct 09 '13 at 11:14