jQuery :focus Selector

Last Updated : 11 Jul, 2025

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>