Difference Between window.focus() and window.blur() in JavaScript

1. the window.focus() in JavaScript
2. the window.blur() in JavaScript

In this tutorial, you will understand the difference between the window.focus() and window.blur() methods in JavaScript.

the window.focus() in JavaScript

The window.focus() method may be used to put the window into focus. The attention remains on the window when it is opened.

The window.focus() method returns to the primary or parent window if it is minimized or closed. In simple terms, we can say that the window.focus() method requests to focus on a newly opened window.

It does not require any parameters. It also does not return any value.

function wFocus() {
  Tab.focus();
}

the window.blur() in JavaScript

The window.blur() method either initiates the blur event or adds a function to run when one occurs. This technique is frequently used in conjunction with the focus() function.

This method also does not require any parameters as well as does not return any value.

function wBlur() {
  Tab.blur();
}

Run Code

When you run the code, you will see something like this:

In the screenshot, you will see that four buttons have separate functions or work to do. Let’s discuss them in detail.

At first, when you click the button Open Webpage, it makes requests that trigger the function to open the webpage. The webpage height is about 200, and the width is about 350.

Similarly, clicking the Blur Webpage button removes focus from the current page. Likewise, clicking the Focus Webpage button refocuses on the newly opened webpage.

Finally, if you click on Close Webpage, it closes the newly opened webpage.