focusin javascript

How to Use the focusin Event in JavaScript?

by

What is the focusin event in JavaScript, and how to use it?

In this article, we will show you how to use focusin event to create interactive and user-friendly forms.

Aside from that, you’ll also learn the key differences between the focusin and focus events with examples to help you implement focusin in your projects.

Enhance your web development skills and improve user experience with this essential guide on using focusin event in JavaScript.

What is the focusin in JavaScript?

The focusin event in JavaScript is triggered when an element within a form receives focus.

This event is similar to the focus event, but the key difference is that focusin bubbles up the DOM tree, whereas focus does not.

It simply means that you can attach a focusin event listener to a parent element, and it will be triggered when any child element within that parent receives focus.

Syntax

The focusin event in JavaScript is not a method, but rather an event that is triggered when an element receives focus.

The syntax for attaching a focusin event listener to an element is as follows:

element.addEventListener("focusin", function(event) {
// code to execute when the focusin event is triggered
});

In this syntax, element is the DOM element to which you want to attach the focusin event listener, and the second parameter is a function that defines what should happen when the focusin event is triggered.

This function takes one parameter, event, which is an object that contains information about the event.

On the other hand, the opposite of the focusin event is the focusout event, which is triggered when an element within a form loses focus.

Like focusin, the focusout event also bubbles up the DOM tree.

Browser compatibility

✅ Chrome

✅ Edge

✅ Firefox

✅ IE

✅ Opera

✅ Safari

What is difference between focus and Focusin in JavaScript?

The main difference between the two events is that the focusin event supports event bubbling, whereas the focus event does not.

As we mentioned earlier, you can use the focusin event on a parent element to detect when any of its child elements receive focus.

Here’s an example to help illustrate how these events work:

HTML:

<form id="form">
  <label>Username: <input type="text" placeholder="input text" /></label>
  <label>Password: <input type="password" placeholder="password" /></label>
</form>

JavaScript:

const form = document.getElementById("form");
form.addEventListener("focusin", (event) => { ✅
event.target.style.background = "lightblue";
});
form.addEventListener("focusout", (event) => { ✅
event.target.style.background = "";
});

In this example, we use the focusin event to detect when any of the input elements inside the form receive focus.

When this happens, we change the background color of the focused element to lightblue.

When the element loses focus, we use the focusout event to reset its background color.

If we were to use the focus event instead of the focusin event, we would need to add an event listener to each input element individually, since the focus event does not bubble up to parent elements.

Creating Interactive Forms with the focusin Event in JavaScript

The focusin event in JavaScript can be used to create interactive forms by detecting when an element, or any element inside of it, gains focus.

This event is distinct from the focus event, in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

This event is often used together with the focusout event.

Here’s an example that demonstrates how to use the focusin event to create an interactive form:

<!DOCTYPE html>
<html>
  <head>
    <title>Focusin and Focus Events Example</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <form id="form">
      <label>Username: <input type="text" placeholder="input text" /></label>
      <label>Password: <input type="password" placeholder="input password" /></label>
    </form>

    <script>
      const form = document.getElementById("form");
      form.addEventListener("focusin", (event) => { ✅
        event.target.style.background = "lightblue";
      });
      form.addEventListener("focusout", (event) => { ✅
        event.target.style.background = "";
      });
    </script>
  </body>
</html>

In this example, we have an HTML form with two input elements. We use the focusin event to detect when any of the input elements inside the form receive focus.

When this happens, we change the background color of the focused element to lightblue. When the element loses focus, we use the focusout event to reset its background color.

Output:

Conclusion

In conclusion, this article discuss the focusin event in JavaScript, which is a valuable tool for creating interactive and user-friendly forms.

Unlike the focus event, focusin supports event bubbling, allowing developers to attach a focusin event listener to a parent element and detect when any child element within that parent receives focus.

This article provided a clear explanation of the focusin event, its syntax for attaching event listeners, and its key difference from the focus event.

Additionally, we demonstrated how to use the focusin event with code examples, improving the user experience by changing the background color of focused elements in a form.

We are hoping that this article provides you with enough information that helps you understand the focusin in JavaScript.

You can also check out the following article:

Thank you for reading itsourcecoders 😊.

Leave a Comment