HTML - DOM Element focus() Method

Quiz

The HTML DOM Element focus() method is used to set focus on a specific element in the web page, such as input fields or button elements.

The term focus refers to the active element that receives input from the keyboard or other input devices. This method allows you to set any element as active or focused based on certain criteria.

Syntax

Following is the syntax of the HTML DOM Element focus() method −

element.focus();

Parameters

This method does not accept any parameter.

Return Value

This method does not return any value.

Example 1: Setting Auto Focus on an Input Field

The following is the basic example of the HTML DOM Element focus() method. It sets auto focus on an input field −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element focus()</title>
</head>
<body>
<h3>HTML DOM Element focus() Method</h3>
<p>Setting auto focus to an Input Field</p>
<form onsubmit = "return false">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
<script>
   function focusUsername() {
      var usernameInput = document.getElementById('username');
      usernameInput.focus();
   }
   focusUsername();
</script>
</body>
</html>

The above program sets the auto focus on an input field after loading the page.

Example 2: Highlighting Second Input Field on Focus

Here is another example of the HTML DOM Element focus() method. We use this method to highlight the second input field when it gets focused −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element focus()</title>
<style>
  .highlight{
     background-color: yellow;
  }
</style>
</head>
<body>
<h3>HTML DOM Element focus() Method</h3>
<p>Focus on Second Input Field Example</p>
<form>
   <input type="text" id="firstName" placeholder="First name">
   <br><br>        
   <input type="text" id="lastName" placeholder="Last name">
   <br><br>        
   <input type="email" id="email" placeholder="Email">
   <br><br>        
   <button type="button" onclick="focusOnFirstInput()">Focus on second Field
   </button>
</form>
<script>
   function focusOnFirstInput() {
      // Get all input elements within the form
      const formInputs = document.querySelectorAll('form input');
      // Focus on the second input element
      formInputs[1].focus();
      formInputs[1].classList.add("highlight");
   }
</script>
</body>
</html>

When the button is clicked, the second input field will be focused and highlighted with a yellow background.

Example 3: Setting Focus on Button Element

In the example below, we use the focus() method to set focus on a specific button (i.e., the second button) on the web page −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element focus()</title>
<style>
  .highlight {
    background-color: green;
    color: white;
    padding: 10px;
  }
</style>
</head>
<body>
<h3>HTML DOM Element focus() Method</h3>
<p>The first button will be auto focused after 2 seconds.</p>
<form>
   <input type="text" id="firstName" placeholder="First name">
   <br><br>        
   <input type="text" id="lastName" placeholder="Last name">
   <br><br>        
   <input type="email" id="email" placeholder="Email">
   <br><br>        
   <button type="button" onclick="focusOnFirstInput()">Submit</button>
   <button type="button">Reset</button>
   <button type="button">Refresh</button>
   <span id="res"></span>
</form>
<script>
   setInterval(setFocus, 2000);
   function setFocus() {
      let btns = document.querySelectorAll('button');
      btns[0].focus();
      btns[0].classList.add('highlight');
      document.getElementById('res').innerHTML = "Focused..!";
   }
</script>
</body>
</html>

Once the above program is executed, the first button will be auto-focused after 2 seconds of the page being loaded.

Supported Browsers

Method
focus()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page