HTML DOM focus() Method

Last Updated : 13 Jun, 2023

DOM focus() method is used to give focus to an element and also to remove the focus with the help of blur() method. We can apply focus to any element and enable it by doing some operation. For example, we can give focus to some text by clicking a button.

Syntax:

Object.focus()

Example-1:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>DOM focus() Method</title> 
    <style> 
        input[type=text]:focus { 
            background-color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <input type="text" id="gfg" value="GeeksForGeeks"> 
        <h2>DOM focus() Method </h2> 
        <button type="button" onclick="geek()"> 
            Submit 
        </button> 
        <script> 
            function geek() { 
                document.getElementById("gfg").focus(); 
            }  
        </script> 
    </center> 
</body> 
</html>

Output:

Before applying focus:

After applying focus:

Example-2:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>DOM focus() Method</title> 
    <style> 
        a:focus { 
            background-color: magenta; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksForGeeks 
        </h1> 
        <h2>DOM focus() Method</h2> 
        <a href="www.geeksforgeeks.com" id="geek">geeksforgeeks</a> 
        <br> 
        <button type="button" onclick="geeks()"> 
            Submit 
        </button> 
        <script> 
            function geeks() { 
                document.getElementById("geek").focus(); 
            }  
        </script> 
    </center> 
</body>