To remove the focus from the window, we have used blur() method of the Window object. It removes the focus from a window and moves it behind other windows. Now, to explain it more clearly, we have also used the focus() method of Window object which sets the focus to the specified window in front of other windows. When you load the 'removeFocus.html' code, you will get a button 'Set Focus'. On clicking the button, the setFocus() function is called and a new window will get open but the focus is on the 'removeFocus.html' page as we have used the method window.focus(). But on clicking the button 'Remove Focus' from the 'hello.html' page, the removeFocus() function is called and the focus will lost from the current window i.e. hello.html due to the window.blur() method and hence focus gets back to the 'removeFocus.html'.
Here is the code of removeFocus.html:
<button onclick="setFocus()">Set Focus</button>
Here is the code of hello.html:
<button onclick="removeFocus()">Remove Focus</button>
Output will be displayed as:
On clicking the button 'Set Focus', a 'hello.html' page will get open:
On clicking the button 'RemoveFocus' , you will move back to the 'removeFocus.html'
Liked it! Share this Tutorial