What is focus event Listener in javascript?

Rumman Ansari   Software Engineer   2023-03-26   240 Share
☰ Table of Contents

Table of Content:

The "focus" event in JavaScript is triggered when an element on a webpage receives focus. You can use an event listener to execute a function when the "focus" event occurs on an element.

Here is an example of using an event listener to execute a function when an input element receives focus:


<input type="text" id="myInput">

<script>
  // Define the function to be executed when the input element receives focus
  function inputFocused() {
    alert("Input element received focus!");
  }

  // Attach the function as an event listener to the "focus" event on the input element
  document.getElementById("myInput").addEventListener("focus", inputFocused);
</script>

In this example, the function inputFocused is defined and is attached as an event listener to the "focus" event on the input element with the ID "myInput". When the input element receives focus, the function will be executed and an alert message will be displayed.

Event listeners are a powerful tool for creating interactive and dynamic webpages. They can be attached to a wide range of events on different elements, such as mouse clicks, keyboard input, form submissions, and more.

Real life example of focus event Listener in javascript

Here is an example of using the "focus" event listener in a real-life scenario in JavaScript:

Imagine you have a form on your webpage with several input fields, and you want to display a message to the user when they focus on a particular input field. You can use the "focus" event listener to do this.

Here is the HTML code for the form:


<p id  = "message"> Fill all fields. </p>
<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="Submit">
</form>

Here is the JavaScript code that attaches the "focus" event listener to the "password" input field and displays a message when it receives focus:


<script>
  // Define the function to be executed when the password input field receives focus
  function passwordFocused() {
    // alert("Please enter a strong password for security purposes.");
 document.getElementById("message").innerHTML = "Please enter a strong password for security purposes.";
  }

  // Attach the function as an event listener to the "focus" event on the password input field
  document.getElementById("password").addEventListener("focus", passwordFocused);
</script>

In this example, the function passwordFocused is defined and is attached as an event listener to the "focus" event on the password input field with the ID "password". When the password input field receives focus, the function will be executed and an alert message will be displayed/ message inside the paragraph will be changed.

Full code in one place 


<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<p id  = "message"> Fill all fields. </p>
<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="Submit">
</form> 


</body>
</html> 

<script>
  // Define the function to be executed when the password input field receives focus
  function passwordFocused() {
     document.getElementById("message").innerHTML = "Please enter a strong password for security purposes.";
  }

  // Attach the function as an event listener to the "focus" event on the password input field
  document.getElementById("password").addEventListener("focus", passwordFocused);
</script>
‹ Previous -   Keydown event Listener
‹ Next