Tutorialspoint.dev

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.

Supported Browser: Both method is supported in all Browsers.

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://tutorialspoint.dev/slugresolver/"
                                 "_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:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter