jQuery focusout Event

Posted in jQuery Tutorial

Updated on Nov 01, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In web development, handling user interactions is crucial for creating engaging and interactive experiences. jQuery provides a variety of event handling methods, including .on(), which allows you to attach event handlers to elements. One such event is the focusout event, which occurs when an element loses focus. Although the .focusout() method is deprecated, you can still use .on() to achieve the same functionality.

In this guide, we'll explore the usage of the .on("focusout") event handler with clear examples to demonstrate its effectiveness.

🧠 Understanding focusout Event

The .on("focusout") event handler is used to execute a function when an element loses focus. This can be particularly useful for validating form inputs, triggering actions when users move away from specific elements, or implementing accessibility features.

💡 Syntax

The syntax for the focusout event is straightforward:

syntax.js

Copied

$(selector).on("focusout", handler);

📝 Example

Basic Usage:

Let's start with a simple example where we display an alert message when a text input loses focus:
index.html
Copied
```
<input type="text" id="textInput">
```
example.js
Copied
```
$("#textInput").on("focusout", function() {
  alert("Input lost focus!");
});
```
In this case, when the user moves away from the text input, an alert will appear with the message "Input lost focus!".
Validating Form Inputs:

You can use the focusout event to validate form inputs in real-time. Here's an example where we check if a text input is empty when it loses focus:
index.html
Copied
```
<input type="text" id="username">
<div id="error" style="color: red;"></div>
```
example.js
Copied
```
$("#username").on("focusout", function() {
  if ($(this).val() === "") {
      $("#error").text("Username cannot be empty");
  } else {
      $("#error").text("");
  }
});
```
In this example, if the user leaves the username input empty and moves to another element, an error message will be displayed below the input.
Delegated Event Handling:

You can also use delegated event handling with .on() for dynamically added elements. Here's how you can handle focusout events on dynamically added text inputs within a container:
index.html
Copied
```
<div id="container">
  <input type="text" class="dynamicInput">
</div>
<button id="addInput">Add Input</button>
```
example.js
Copied
```
$("#container").on("focusout", ".dynamicInput", function() {
  alert("Dynamic input lost focus!");
});
$("#addInput").click(function() {
  $("#container").append('<input type="text" class="dynamicInput">');
});
```
In this example, when a dynamically added text input within the container loses focus, an alert will be triggered.

🎉 Conclusion

The .on("focusout") event handler in jQuery allows you to execute code when elements lose focus, enabling you to create more interactive and user-friendly web applications. Whether you need to perform form validation, trigger actions, or handle dynamically added elements, this event handler provides a versatile solution.

By mastering its usage, you can enhance the usability and functionality of your web projects effectively.