Javascript Window Blur() and Window Focus() Method

Last Updated : 31 Jul, 2024

JavaScript provides various methods to manipulate browser windows, two of which are window.blur() and window.focus(). These methods are particularly useful when managing the user interface and enhancing the user experience by controlling window focus.

Javascript Window Blur()

Javascript Window Blur() method is used to remove focus from the current window. i.e, It sends the new open Window to the background.

Syntax:

Window.blur()

Parameter: It does not require any parameters.

Return Value: It does not return any value.

Below examples illustrate the window.blur() method of JavaScript:

Example: The below example illustrates the window.blur() method in JavaScript:

HTML

<!DOCTYPE html> <html lang="en">  <head>     <title> window.blur() method of JavaScript</title> </head>  <body>     <h1 style="color: green">GeeksforGeeks</h1>     <h2>JavaScript window.focus() Method</h2>     <script>         let Window;          // Function that open the new Window         function windowOpen() {             Window = window.open(                 "https://www.geeksforgeeks.org/",                 "_blank", "width=400, height=450 top=75");         }          // function that Closes the open Window         function windowClose() {             Window.close();         }          //function that focus on open Window         function windowFocus() {             Window.focus();         }     </script>     <button onclick="windowOpen()">         Open GeeksforGeeks     </button>     <button onclick="windowFocus()">         Focus GeeksforGeeks     </button>     <button onclick="windowClose()">         Close GeeksforGeeks     </button> </body>  </html>

Output: If click on the blur GeeksforGeeks button then the geeksforgeeks.org page will move to the background

JavaScript Window.focus()

JavaScript Window.focus() method is used to focus on the new open window. i.e bringing back the blurred window to the foreground.

Syntax:

window.focus()

Parameter: It does not require any parameters.

Return Value: It does not return any value.

Example: The example below illustrates the window.focus() method in javascript.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <title> window.blur() method of JavaScript</title> </head>  <body>     <h1 style="color:green" class="gfg">GeeksforGeeks</h1>     <h2>Focus</h2>     <script>         let Window;          // Function that open the new Window         function windowOpen() {             Window = window.open(                 "https://www.geeksforgeeks.org/",                 "_blank", "width=400, height=450 top=75");         }          // function that Closes the open Window         function windowClose() {             Window.close();         }          //function that focus on open Window         function windowFocus() {             Window.focus();         }     </script>     <button onclick="windowOpen()">         Open GeeksforGeeks     </button>     <button onclick="windowFocus()">         Focus GeeksforGeeks     </button>     <button onclick="windowClose()">         Close GeeksforGeeks     </button> </body>  </html>

Output: if click on the focus GeeksforGeeks button then the geeksforgeeks.org windows will come to the foreground.

Differences Between window.blur() and window.focus()

Feature	window.blur()	window.focus()
Functionality	Removes focus from the current window, sending it to the background	Brings the current window to the foreground, ensuring it has the user’s attention
Common Use Case	Used to allow users to interact with other windows or applications without closing the current window	Used to alert users to important information or actions required in the current window
User Experience	The window remains open but is no longer the active window	The window becomes the active window, taking precedence over others
Typical Scenarios	Opening pop-up windows or new tabs without disturbing the user’s current task	Bringing notification or confirmation windows to the user’s immediate attention
Effect on User	User’s attention is diverted to another window or application	User’s attention is brought back to the current window

Conclusion

The window.blur() and window.focus() methods are essential tools for managing window focus in JavaScript. They allow developers to control the user’s interaction with multiple windows, enhancing the overall user experience. For a more comprehensive understanding of JavaScript and its various features, refer to the JavaScript Cheat Sheet – A Basic Guide to JavaScript.

Supported Browser: The browser is supported by Window Blur() and Window Focus() Methods are listed below:

Google Chrome 1 and above
Edge 12 and above
Firefox 1 and above
Internet Explorer 4 and above
Opera 12.1 and above
Safari 1 and above

JavaScript window.open() Method

Naman_Garg

Improve

Article Tags :

Javascript Window Blur() and Window Focus() Method