How can I prevent my focusout function from firing if focus moves to one particular element?

Question

Trying to figure out how to keep the DIV from fading when you click on it. I just want the DIV to fade after you click off anywhere else on the screen, everywhere but the actual "testdiv" and the input field. Skills aren't that strong with javascript, so any help would be appreciated. Thanks.

    $(document).ready(function(){
    $('.showdiv').focus(function(){
       $('.testdiv').fadeIn(1000);
    }).focusout(function(){
       $('.testdiv').fadeOut(1000);
    });
    });

body {
    padding: 50px
}

.showdiv {
    width: 100%;
    height: 30px;
    padding:10px}

.testdiv{  
     display:none;
     margin-top:0;
     width:auto;
     background-color: #efefef;
     padding: 20px;
     font: 12px Arial, san serif;}

*:focus{
    outline:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" class="showdiv" Placeholder="Search by Keyword"/>
<div class="testdiv">
    <input type="checkbox"> Search only open source materials
</div>

Here is a JSFiddle example.

Guessing `testdiv` is not inside of `showdiv`. Do you have basic HTML? — epascarello, Nov 16 '18 at 20:26
https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — epascarello, Nov 16 '18 at 20:43

isherwood · Answer 1 · 2018-11-16T21:07:41.823

I'm not in love with this because it could be confusing to the user, but it works. It doesn't work if you tab to the checkbox.

  $('.showdiv').focus(function() {
    $('.testdiv').fadeIn(1000);
  }).focusout(function() {
    $('.testdiv').fadeOut(1000);
  });

  $('.testdiv input').change(function() {
    $('.testdiv').stop(); // end animation on the faded element
    $('.showdiv').focus(); // return focus to reinstate the focusout handler
  });

Demo

How can I prevent my focusout function from firing if focus moves to one particular element?

1 Answers1