Set the focus to HTML form element using JavaScript

Set the focus to HTML form element using JavaScript

Last Updated : 28 Dec, 2023

To set focus to an HTML form element, there can be many methods that can be used to focus. In this article, we will discuss them all.

These are the following approaches:

Table of Content

Using focus() method
Using window.onload method

Approach 1: Using focus() method

In this approach, we are going to use the focus() method to focus on the HTML element. We are creating a function in which we select an input and call the focus method on it. This method is set to the onclick function, whenever that button is clicked that onclick function will be invoked and it will focus on to input box.

Example: The focus() method is set to the input tag when the user clicks on the Focus button.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Set focus to HTML form element
    </title>
</head>

<body>
    <p>
        Click on button to set focus
        on input field
    </p>

    <form>
        <input type="text" id="input1">

        <br><br>

        <button type="button" onclick="focusInput()">
            Set Focus
        </button>
    </form>

    <script>
        function focusInput() {
            document.getElementById("input1").focus();
        } 
    </script>
</body>

</html>

Output:

focuss — Focusing on input element

Approach 2: Using window.onload method

In this appraoch we are focusing on the input field by using window.onload method. we are calling focus method when a window loads to the browser.

Example: This example focuses on the input field automatically on page load.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Set focus to HTML form element
    </title>
</head>

<body>
    <p>
        Click on button to set focus
        on input field
    </p>

    <form>
        <input type="text" id="input1">

        <br><br>

        <button type="button" onclick="focusInput()">
            Set Focus
        </button>
    </form>

    <script>
        function focusInput() {
            document.getElementById("input1").focus();
        } 
    </script>
</body>

</html>

Output:

focissssss — window.onload focusing method

Set the focus to HTML form element using JavaScript

B

BhavyadeepPurswani

Improve

Article Tags :

Similar Reads

How to focus element while loading the page in HTML ?

HyperText Markup Language(HTML) is the basic building block of web pages that defines a structure. This markup language is used by browsers to manipulate data like text, images, and other content so that they can be displayed in the required format. HyperText refers to the links that connect web pag

Implement a JavaScript when an element loses focus

Given a document, the task is to implement functionality when the element loses focus. We have 2 options, one is the onblur event and another is onfocusout event JavaScript. We're going to discuss a few methods. First few methods to understand. Approach 1: Using onblur event JavaScript onblur Event:

How to get focused element using jQuery?

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

How to set the focus to the first form field ?

In this article, we'll discuss how to set focus on the first form field. By setting the focus on the first form field, we indicate the user from where to begin. It increases the readability of a form in a webpage. There are various approaches to do so, we'll explain two of them with suitable example

How to Set Cursor Position in Content-Editable Element using JavaScript?

To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery

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() meth

How to Handle JavaScript Events in HTML ?

An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks, hovers, page loading, etc. All this stuff gets into action(processed) with the help of event handlers. In this article, you will learn about d

HTML DOM Input URL focus() Method

The Input URL focus() method in HTML DOM is used to get focus to the Input URL field when the event occurs. We can use this method for directing the focus of the user when an event occurs. Syntax: URLObject.focus() Parameters: This method does not contain any parameter values. Return Value: It does

HTML | DOM Input Text autofocus Property

The DOM Input Text autofocus Property in HTML DOM is used to set or return whether the Input Text Field should get focus when the page loads. It reflects the HTML autofocus attribute. Syntax: It returns the autofocus property.textObject.autofocusIt is used to set the autofocus property.textObject.au

HTML DOM Input Text focus() Method

The Input Text focus() method in HTML DOM is used to get focus to the text field when the event occurs. Syntax: textObject.focus() Parameters: This method does not contain any parameter values. Return Value: It does not return any value. Example: Below program illustrates the use of the input text f