Open In App
Related Articles

Javascript Window Blur() and Window Focus() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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() 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.  

 

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

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.



Last Updated : 30 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads