Skip to content
Related Articles

Related Articles

jQuery :focus Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

The jQuery :focus Selector is used to select all the elements that have focus on the document currently. It is also used with a tag name or using another selector

Syntax: 

$(":focus")

Example 1: 

HTML




<!DOCTYPE html>
<html>
<head>
  <script src=
  </script>
  <script>
    $(document).ready(function () {
      $("input").focus();
      $(":focus").css(
        "background-color", "green");
    });
  </script>
</head>
<body>
  <center>
    <h1 style="color:green;">
      GeeksForGeeks
    </h1>
    <h2> jQuery :focus Selector </h2>
    Name:
    <input type="text"/>
    <br>
    Password:
    <input type="text"/>
    <br>
    <button>Submit</button>
  </center>
</body>
</html>

Output:

  

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
  <script src=
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("textarea").focus();
          $(":focus").css("font-size", "25px");
      });
    });
  </script>
</head>
<body>
  <center>
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
    <h2> jQuery :focus Selector </h2>
    <textarea>GeeksforGeeks</textarea>
    <br>
    <textarea>Learning Together!</textarea>
    <br>
    <button>Change</button>
  </center>
</body>
</html>

Output:

 

Supported Browsers: The browsers supported by jQuery :focus Selector are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!