Skip to content
Related Articles

Related Articles

HTML | DOM focus() Method
  • Last Updated : 25 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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:




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




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

Output:
Before applying focus:

After applying focus:

Supported Browsers: The browser supported by DOM focus() method are listed below:

  • Google Chrome 15.0
  • Internet Explorer 11.0
  • Firefox 15.0
  • Opera 15.0
  • Safari 6.0

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :