Open In App

JavaScript Focus() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The focus() method in JavaScript is used to give focus to an HTML element, such as an input field, button, or link. When called on an element, it brings that element into focus, typically highlighting it or making it ready for user interaction.

Syntax:

HTMLElementObject.focus();

Parameters:

It does not accept any parameters. 

Return Value:

This method does not return any value.

JavaScript Focus() Method Example:

Example 1: Focuses on an input field by hovering over that field. 

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 code creates a form with two text input fields and a button. When the mouse hovers over the first input field, `myFunction()` is called, which uses JavaScript’s `focus()` method to give focus to that input field, making it active for user interaction.

The focus field can be removed with the help of the blur() method in javascript. Illustration of blur method on clicking a field.

Example 2: In this example, we will focus on a text input field by clicking a button and remove the focus by clicking the remove focus button.

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:

This HTML code creates two buttons: “set focus” and “remove focus”, along with a text input field. Clicking “set focus” triggers the `setFocus()` function, which uses JavaScript’s `focus()` method to give focus to the text input. Clicking “remove focus” triggers the `removeFocus()` function, which uses `blur()` method to remove focus from the text input.

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



Last Updated : 22 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads