Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery blur Event

Posted in jQuery Tutorial
Updated on May 15, 2024
By Mari Selvan
👁️ 47 - Views
⏳ 4 mins
💬 1 Comment
jQuery blur Event

Photo Credit to CodeToFun

🙋 Introduction

In web development, handling user interactions is crucial for creating engaging and dynamic experiences. One common interaction is when an element loses focus, known as the "blur" event. jQuery simplifies event handling, including the blur event.

In this guide, we'll explore the jQuery blur event, its syntax, and provide examples for better understanding.

🧠 Understanding blur Event

The blur event occurs when an element loses focus. It's commonly used for form validation, input formatting, or triggering actions when users move away from an input field.

💡 Syntax

The syntax for the blur event is straightforward:

syntax.js
Copied
Copy To Clipboard
.on("blur", [, eventData ], handler )

The .on() method attaches one or more event handlers for the selected elements. Here, we're specifically using it to handle the blur event.

📝 Example

  1. Basic Usage:

    Let's start with a simple example. Suppose you have a text input field and you want to alert a message when it loses focus:

    index.html
    Copied
    Copy To Clipboard
    <input type="text" id="textInput">
    example.js
    Copied
    Copy To Clipboard
    $("#textInput").on("blur", function() {
      alert("Input field lost focus!");
    });

    This code attaches a blur event handler to the text input field with the ID textInput. When the input loses focus, an alert will be triggered with the message "Input field lost focus!".

  2. Advanced Usage with Event Data:

    You can also pass additional data to the event handler using the eventData parameter. For instance, let's log the value of the input field when it loses focus:

    index.html
    Copied
    Copy To Clipboard
    <input type="text" id="textInput">
    <div id="output"></div>
    example.js
    Copied
    Copy To Clipboard
    $("#textInput").on("blur", { outputId: "output" }, function(event) {
      $("#" + event.data.outputId).text($(this).val());
    });

    In this example, the value of the input field will be displayed in a <div> with the ID output when the input loses focus.

  3. Delegated Event Handling:

    You can also use delegated event handling to handle blur events for dynamically added elements. For example, let's handle blur events for all text input fields inside a specific <div>:

    index.html
    Copied
    Copy To Clipboard
    <div id="container">
      <input type="text" class="dynamicInput">
    </div>
    <button id="addInput">Add Input Field</button>
    example.js
    Copied
    Copy To Clipboard
    $("#container").on("blur", ".dynamicInput", function() {
      alert("Input field inside container lost focus!");
    });

    With this code, blur events on text input fields inside the #container will be handled even if they are added dynamically after the page has loaded.

🎉 Conclusion

The jQuery blur event is a powerful tool for handling interactions when elements lose focus. Whether you need to validate user input, update UI elements, or trigger actions, understanding and effectively using the blur event can greatly enhance the usability of your web applications.

By leveraging jQuery's event handling capabilities, you can create smoother and more interactive user experiences.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy