title: How to check if the focus left a group of elements
body: <p>I want to have a form with 4 inputs that typically displays only the first one. When it gets focus, the other 3 inputs become visible.</p>
  
  <p>If the focus leaves the form (user clicks/taps/tabs outside any input), the inputs should hide.</p>
  
  <p>I thought about using <code>document.activeElement</code> on the <code>blur</code> event of the form or the input fields to check where the focus was going after the input lost it. However, <code>document.activeElement</code> inside a <code>blur</code> event seems to always return <code>body</code>, not the element that is actually going to receive it.</p>
  
  <p>This is what I got:</p>
  
  <pre><code>// whenever an input loses focus:
  //   if the focus is still inside the form,
  //      keep the inputs visible
  //   if focus left the form
  //      hide the inputs, leaving only the first visible
  $('#new-journal input').blur(function (e) {
      var $active = $(document.activeElement);
      if ($active.closest('#new-journal').length === 0) {
          $('#new-journal input:gt(0)').addClass('hide');
      }
  });
  </code></pre>
  
  <p>...considering that #new-journal is the ID of the form element.
  <div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// whenever the user clicks/focuses the "Add a journal" input, 
  // the other inputs inside the form appear
  $('#name').focus(function(e) {
    $('#new-journal input:gt(0)').removeClass('hide');
  });
  
  // whenever an input loses focus:
  //   if the focus is still inside the form,
  //      keep the inputs visible
  //   if focus left the form
  //      hide the inputs, leaving only the first visible
  $('#new-journal input').blur(function(e) {
    var $active = $(document.activeElement);
    if ($active.closest('#new-journal').length === 0) {
      $('#new-journal input:gt(0)').addClass('hide');
    }
  });
  
  
  // just logs who is the element with focus (document.activeElement)
  $('*').on('focus blur', function(e) {
    var $history = $('#history'),
      current = document.activeElement,
      label = current.tagName + ' ' + current.id;
    $history.html($history.html() + label + '\n');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=text] {
    padding: 4px 6px;
    display: block;
    margin: 0 0 5px;
    box-sizing: border-box;
  }
  .hide {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0;
  }
  pre:not(:empty) {
    border-radius: 2px;
    background-color: #eee;
    padding: 5px;
  }
  .col {
    float: left;
    width: 45%;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="col"&gt;
    &lt;form id="new-journal"&gt;
      &lt;input type="text" id="name" placeholder="Add a journal" /&gt;
      &lt;input type="text" id="field1" placeholder="Sub title" class="hide" /&gt;
      &lt;input type="text" id="field2" placeholder="Owner" class="hide" /&gt;
      &lt;input type="text" id="field3" placeholder="Price" class="hide" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="col"&gt;
    &lt;p&gt;document.activeElement:&lt;/p&gt;
    &lt;pre id="history"&gt;&lt;/pre&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas on how to detect if the focus is still inside a form (any focusable container element) besides using <code>document.activeElement</code>?</p>
  
  <hr>
  
  <p><strong>Update:</strong>
  I also tried using CSS only, with these rules:</p>
  
  <pre><code>#new-journal input:not(#name) {
      display: none;
  }
  #new-journal input:focus ~ input {
      display: block !important;
  }
  </code></pre>
  
  <p>...but I got the exact same result.</p>