Javascript | Window Blur() and Window Focus() Method

Window.blur() Method
The blur() method is used to remove focus from the current window. i.e, It send 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.

Window.focus() Method
The focus() method is used to focus on the new open window. i.e bringing back the blur window to the foreground.

Syntax:

window.focus()

Parameter: It does not require any parameters.

Return Value: It does not Return any value.

Below example illustrates the window.blur() and window.focus() method in JavaScript:

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      window Blur and Focus method
    </title>
    <style>
        body {
            text-align: center;
        }
          
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
    </style>
</head>
  
<body>
    <div class="gfg">GeeksforGeeks</div>
    <h2>Blur and Focus</h2>
    <script>
        var Window;
  
        // Function that open the new Window 
        function windowOpen() {
            Window = window.open(
              "https://www.geeksforgeeks.org/",
                "_blank", "width=400, height=450");
        }
  
        // function that Closes the open Window 
        function windowClose() {
            Window.close();
        }
  
        //function that blur the open Window
        function windowBlur() {
            Window.blur();
        }
  
        //function that focus on open Window
        function windowFocus() {
            Window.focus();
        }
    </script>
    <button onclick="windowOpen()">
      Open GeeksforGeeks
    </button>
    <button onclick="windowBlur()">
      Blur GeeksforGeeks
    </button>
    <button onclick="windowFocus()">
      Focus GeeksforGeeks
    </button>
    <button onclick="windowClose()">
      Close GeeksforGeeks
     </button>
</body>
  
</html>

chevron_right


Output: If click on blur GeeksforGeeks button then geeksforgeeks.org page will move to the background and if click on focus GeeksforGeeks button then the geeksforgeeks.oge windows will come to foreground.

Click on the Blur:

Click on the Focus:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.