Skip to content
Related Articles

Related Articles

Javascript | Window Blur() and Window Focus() Method
  • Last Updated : 26 Jul, 2019

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:




<!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>

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
Recommended Articles
Page :