jQuery :focus Selector

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
  </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

Explore