How to Set Focus of an HTML Form Element in JavaScript

Focus on the element refers to the section of the currently active page. In the present document, one HTML element can be focused on at a time, which could be a window, text box, or button. In HTML forms, the input field should be an active element, as many elements do not allow focusing by default. So, for focusing on the elements, use the HTMLElement.focus() method.

This blog post will illustrate the process of setting the focus on an element of an HTML form in JavaScript.

How to Set Focus of an HTML Form Element in JavaScript?

For setting focus to an element of an HTML form, the JavaScript focus() method can be used. To do so, call this method while passing it the object of the element that needs to be focused.

Syntax
Follow the below-mentioned method to focus on an element of an HTML form:

Let’s try some examples to see how to set focus on an element while on page loading or on the hover of an element.

Example 1: Set Focus of an HTML Form Element on Page Load
In the given example, we will set focus on the input text field on the page load. So, create a form with an input text field that will be active while the page loads:

The HTML form will look like this:

As you can see, the above output shows an input field that is not active. So, to focus on this text box, use the below-given JavaScript code:

In the above lines of code:

• Define a function on the “window.onload” event.
• Call the “focus()” method by fetching the HTML element “text box” using its assigned id with the help of the “getElementById()” method.

The corresponding output will be as follows:

The above GIF indicates that the text box is active on the page load.

Next, let’s see how to set focus on the input field while hovering on the element.

Example 2: Set Focus of an HTML Form Element on hovering the Element
To set the focus on the text box while hovering on it, use the “onmouseover” event listener:

Define a function named “elementFocus()” that will trigger while the mouseover event occurs:

The output shows that the textbox will be active while the mouse hovers on it:

We have provided the essential information related to focusing the HTML element in an HTML form using JavaScript.

Conclusion

To set focus on an element of an HTML form in JavaScript, use the “HTMLElement.focus()” method. It can be set on the HTML elements such as “textbox”, “button” and so on. You can set focus on the element while on the page load or any other event. This blog illustrated the process to set focusing on an element of an HTML form in JavaScript.