How to get focused element using jQuery? Last Updated : 05 May, 2025 Comments Improve Suggest changes Like Article Like Report To focus on element there is an inbuilt selector available in jQuery, which is used to detect the currently focused element. When the element is get focused by the mouse click or by the tab-navigating button this selector return the selected element. You can add the element in JQuery to focused that element easily. Here we will use the JQuery inbuilt selector $(":focus")Syntax:$(":focus")Example 1: This example shows how to focus an element using jQuery. html <!DOCTYPE html> <html> <head> <title> How to get focused element using jQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script> $(document).ready(function() { $("input").focus(); $(":focus").css("background-color", "yellow"); }); </script> <style> .geeks { width: 350px; height: 100px; border: 2px solid green; padding-bottom: 15px; margin: 10px; } h1 { color:green; } </style> </head> <body> <center> <div class="geeks"> <h1>GeeksforGeeks</h1> <input type="text" placeholder="Focused Input" /> </div> </center> </body> </html> Output:Example 2: html <!DOCTYPE html> <html> <head> <title> How to get focused element using jQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("input").focus(); $(":focus").css("background-color", "red"); $("button").focus(); $(":focus").css("background-color", "green"); }); </script> <style> .geeks { width: 350px; height: 100px; border: 2px solid green; padding-bottom: 15px; margin: 10px; } h1 { color:green; } </style> </head> <body> <center> <div class="geeks"> <h1>GeeksforGeeks</h1> <input type="text" placeholder="Focused Input" /> <button type="button" > <a href="https://www.geeksforgeeks.org/community/"> Click me visit ide </a> </button> </div> </center> </body> </html> Comment More infoAdvertise with us Next Article How to get focused element using jQuery? S Sruti Rai Follow Improve Article Tags : Web Technologies JQuery jQuery-Misc Similar Reads How to find element with specific ID using jQuery ? The question is to determine whether an element with a specific id exists or not using JQuery. jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.Syntax: $(selector).on(event, childSelector, data, function, map)Parameters: event: It is requir 3 min read jQuery UI Menu focus Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu focus event triggers when 2 min read jQuery lose focus event The lose focus event in jQuery, occurs when an input field is no longer active, such as when a user clicks outside of it. This event is useful for validating input or triggering actions when the user navigates away from a field. Below are the two ways for JQuery lose focus events:1. Trigerring lose 2 min read How to attach a method to HTML element event using jQuery ? In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will 2 min read How to find the class of clicked element using jQuery ? In this article, we will find the class of the clicked element using jQuery. To find the class of clicked element, we use this.className property. The className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an eleme 1 min read Like