title: Prevent html input focus being lost to the body tag
body: <p>When I have focus on the input field and I click in any open area of the body, the body becomes the document.activeElement , Is there a way to prevent the body focus completely. 
  What I am looking for is : </p>
  
  <ol>
  <li>To prevent focus the body and maintain focus on the input field.</li>
  <li>To avoid the firing of the blur event on the input field.</li>
  </ol>
  
  <p>I've tried adding tabindex=-1 but I believe its for Tab functionality and hence does not work in this case.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("#inpdontlosefocus")
    .addEventListener("blur",function(){
      
    const $log = document.querySelector("#log");
    $log.innerText += "\r\nLost focus";
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
    width:100vw;
      height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body id="notokaytogetfocus"&gt;
    &lt;input id="inpdontlosefocus" type="" placeholder="dont lose focus to body"&gt;  
    
    &lt;input id="inpokaytofocus" type="" placeholder="allow focus"&gt;  
    &lt;div id="log"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>