Move to first 'default' focus of web page

Question

Say you have website, and when you refresh it, if you check which element has focus, using this code:

setInterval(function () {
    console.log('ID: ', $(document.activeElement).attr('id') + ' Tag: ' + $(document.activeElement).prop('tagName')
        + ' C: ' + $(document.activeElement).attr('class'));
}, 2000);

You will see that tag of element is 'BODY' element. How do you restore focus to the same element using javascript because, things like $('body').focus(); doesn't work.

EDIT: It should also reset the 'focus' flow of document. So after you click TAB it will focus the same element as if you would refresh page then click TAB.

EDIT 2: I need to reset focus on some action like keyDown, to default state - the state after you load page. From my research I know that element focused after you load page is 'body', and then after you click Tab, the first element in focus flow of your website is focused. I can't do that using $('body').focus(); - it doesn't focus body and doesn't reset current flow of focus of document.

EDIT 3: So far We have managed to somehow reset focus to body element of website using this code: document.activeElement.blur(); so my above script would say that body is focused, but it doesn't reset the actual flow of current focus, when you use keyboard to navigate website (TAB button). It's possible to have workaround and select specified element you want, but that's not answer to question. What is general purpose mechanism to reset flow of keyboard navigation of website to default state, without refreshing a page?

EDIT 4: https://jsfiddle.net/4qjb5asw/5/

Answer 1

Sounds like you are just looking to reset the default focus for the document on certain events like keydown on a particular key so that the user can begin tabbing through the document from the top after triggering the event.

You can reset the default focus for the document with:

document.activeElement.blur()

You can add any event listener you want to trigger the function. For the keydown event on the escape key it would be:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    document.activeElement.blur()
  }
}); 

IMPORTANT: Note that if you are testing this in an embedded tool like an SO snippet or jsfiddle, you will need to add a little more code to set the focus to the element wrapper for that tool to emulate what would happen if the display area represented the entire document (otherwise, you will reset the focus to the main document and in the case of SO you will start tabbing through the menus, question, answers, comments, and other elements on the page before you get to the snippet).

Example snippet for testing that will reset the focus to the wrapper element in the snippet so that tabbing will restart from the beginning of the snippet (and not from the beginning of the document for this SO page):

/*
 * All code below referencing the "snippet" variable is only
 * here to help us pretend that the snippet result
 * represents the entire document (not needed in a
 * regular implementation).
 */
const snippet = document.querySelector('#snippet');
snippet.focus();

const btn = document.querySelector('#button1');
const resetFocus = () => {
  document.activeElement.blur();
  snippet.focus();
}

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    resetFocus();
  }
});

btn.addEventListener('click', (event) => {
  resetFocus();
});

<!--
  The "snippet" wrapper div with tabindex attribute
  is only here to help us pretend that the snippet result
  represents the entire document (not needed in a regular
  implementation). The tabindex helps ensure that the
  wrapper div is focusable.
-->

<div id="snippet" tabindex="0">
  <div>Tab to or select input to focus. To reset focus:
  </div>
  <ul>
    <li>Press escape key.</li>
    <li>Or, click "Reset" button.</li>
  </ul>
  <div>
    <input id="input1" type="text" name="input1" />
  </div>
  <div>
    <input id="input2" type="text" name="input2" />
  </div>
  <button id="button1">Reset</button>
</div>