JavaScript focus() Method

Last Updated : 20 Sep, 2024

The focus() method in JavaScript is used to give attention, or “focus,” to an HTML element like an input field, button, or link. When an element is focused, it becomes active and ready for user interaction, such as typing in an input field or activating a button.

Syntax:

HTMLElementObject.focus();

Parameters: The focus() method does not require any parameters.

Return Value: This method does not return anything. It simply moves the focus to the specified element.

Examples of focus() Method

Example 1: Focusing on an Input Field

In this example, we will use the focus() method to highlight an input field when the mouse hovers over it.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"
        />
        <title>Document</title>
    </head>

    <body>
        <form action="#">
            <br />
            <br />
            <label> Hover me: </label>
            <input
                type="text"
                onmousemove="myFunction()"
                id="focus"
            />

            <!-- onmousemove is an event which 
            occurs when someone hovers the mouse on
            that particular element and calls
            the function of javascript -->
            <br />
            <br />
            <label>Without Focus: </label>
            <input type="text" />
            <br />
            <br />
            <input type="button" value="submit" />
        </form>
        <script type="text/javascript">
            function myFunction() {
                document
                    .getElementById("focus")
                    .focus();
            }
        </script>
    </body>
</html>

Output:

JavaScript Focus() Method Example Output

Explanation:

This HTML form has two input fields and a submit button.
When you hover your mouse over the “First Name” input field, the myFunction() JavaScript function is triggered, which calls the focus() method to focus on that field.
This makes the “First Name” input field active, allowing the user to start typing without clicking on it.

Example 2: Focusing and Removing Focus on Click

In this example, we will create two buttons: one to set focus on an input field and another to remove the focus using the blur() method.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"
        />
        <title>Document</title>
    </head>

    <body>
        <input
            type="button"
            onclick="setFocus()"
            value="set focus"
        />
        <input
            type="button"
            onclick="removeFocus()"
            value="remove focus"
        />
        <br />
        <br />
        <input type="text" id="focus" />
        <script type="text/javascript">
            function setFocus() {
                document
                    .getElementById("focus")
                    .focus();
            }

            function removeFocus() {
                document
                    .getElementById("focus")
                    .blur();
            }
        </script>
    </body>
</html>

Output:

JavaScript Focus() Method Example Output

Explanation:

The input field allows the user to enter text.
Clicking the “Set Focus” button triggers the setFocus() function, which uses the focus() method to activate the input field.
Clicking the “Remove Focus” button triggers the removeFocus() function, which uses the blur() method to remove focus from the input field, making it inactive.

We have a complete list of Javascript Functions, to check those please go through Javascript Function Complete reference article.

PHP | getcwd( ) Function

revantjain

Improve

Article Tags :

JavaScript focus() Method

Examples of focus() Method

Example 1: Focusing on an Input Field

Explanation:

Example 2: Focusing and Removing Focus on Click

Explanation:

Similar Reads

Thank You!

What kind of Experience do you want to share?