Open In App

jQuery focus() Method

Last Updated : 14 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery focus() is an inbuilt method that is used to focus on an element. The element gets focused by the mouse click or by the tab-navigating button. 

Syntax:

$(selector).focus(function)

Here selector is the selected element. 

Parameter: It accepts an optional parameter in the form of a callback function which will be called once the focus event occurs.

Example 1: The below example explains the focus() method with a callback function passed to it.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        span {
            display: none;
        }
 
        body {
            width: 35%;
            height: 50px;
            border: 2px solid green;
            padding: 35px;
            margin: 10px;
        }
    </style>
    <script src=
    </script>
</head>
 
<body>
    <!-- this paragraph element get focused -->
    <p>
        <input type="text"> <span>focused</span>
    </p>
 
    <!-- jQuery code to show working of this method -->
    <script>
        $("input").focus(function () {
            $(this).next("span").css(
                "display", "inline");
        });
    </script>
</body>
 
</html>


Output: 

Example 2: In the below example, the focus() method is invoked without any parameters.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        span {
            display: none;
        }
 
        body {
            width: 30%;
            height: 50px;
            border: 2px solid green;
            padding: 35px;
            margin: 10px;
        }
    </style>
    <script src=
    </script>
</head>
 
<body>
    <!-- this paragraph element get focused -->
    <p>
        <input type="text"> <span>focused</span>
    </p>
 
    <!-- jQuery code to show working of this method -->
    <script>
        $("input").focus();
    </script>
</body>
 
</html>


Output: 



Previous Article
Next Article

Similar Reads

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: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;
1 min read
JQuery | Set focus on a form input text field on page load
The task is to set the focus on form input text field using jQuery. To do so, Here are a few of the most used techniques discussed. First focus() method needs to be discussed. jQuery focus() MethodThe focus event happens when an element gets focus (Either selected by a mouse click or by "tab-navigating" to it). This method triggers the focus event
2 min read
How to select all on focus in input using JQuery?
The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus whose type="text" $("input[type='text']").select()
1 min read
How to find which DOM element has the focus using jQuery?
The HTML DOM has an activeElement Property. It can be used to get the currently focused element in the document: Syntax: let ele = document.activeElement; Return value: It returns the currently focused element in the document. Example Code Snippets: Example 1: let eleName = document.activeElement.tagName; Returns: The Tag Name of the active element
1 min read
jQuery lose focus event
Lose focus event can occur mainly through focusout() and blur() method. Both of them lose focus when the method gets triggered. These events differ slightly from each other but all of them serve the main purpose of losing focus. Focusout() is often used in combination with focusin() and blur() is often used in combination with focus(). Note that fo
2 min read
jQuery UI Dialog focus Event
The Dialog box is the way to inform the user about something. It is a nice way to popup on the user window to show the information that will happen in the next or any kind of information the developer wants to clarify to the user should know. jQueryUI dialog method is used to create a basic dialog window inside the page. It has a title bar and a co
2 min read
jQuery UI Autocomplete focus Event
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete widget is used to perform autocomplete enables to quickly find and select from a pre-populated list of values as they type, leveraging searching and filteri
2 min read
How to prevent a text field losing focus using jQuery ?
In this article, we will learn how to prevent a textfield or an input from losing focus using jQuery. This can be used in situations where user validation is required. There are two approaches that can be taken: Approach 1: We will be using the jQuery bind(), val(), preventDefault() and focus() methods. The bind() method is used to attach a "focuso
3 min read
jQuery UI Selectmenu focus Event
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI selectmenu widget can provide us with select options. We can use this widget to make a form for different actions. The jQuery UI Selectmenu focus event is used to trigge
2 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 a menu gains focus or when any menu item is activ
2 min read