blur

16 March, 2023

Contributors

Milsaware

@milsaware

About

The blur event is triggered when an element loses focus. This event is commonly used to perform actions when the user clicks away from an element or tabs away from it.

When an element loses focus, such as when the user clicks on another element or presses the tab key to move to another form field, the blur event is triggered. If an event listener is attached to the blur event for the element, the function associated with it will be executed.

The blur event can be attached to various HTML elements, including text input fields, textareas, buttons, and links. For example, you might use the blur event to validate the contents of a text input field when the user finishes typing in it and clicks away, or to update the content of a form field when the user finishes editing it and moves to the next field.

Event listener

Here is an example of how to use the blur event with an event listener:

CSS

input {
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
}

input:focus {
    border-color: #333;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Example of blur Event</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Example of blur Event</h1>
        <form>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
            <button type="submit">Submit</button>
        </form>

        <script src="script.js"></script>
    </body>
</html>

JavaScript

const nameInput = document.getElementById('name');

nameInput.addEventListener('blur', function () {
    if (nameInput.validity.valid) {
        nameInput.classList.remove('invalid');
    } else {
        nameInput.classList.add('invalid');
    }
});

Here, the blur event is added to the nameInput element using the addEventListener() method. The callback function will be executed when the element loses focus. Inside the callback function, we check if the input field is valid by using the validity property of the input element. If it is valid, we remove the invalid class from the element. If it is not valid, we add the invalid class to the element.

The CSS styles for the invalid class can be added to the CSS file to provide visual feedback to the user when the input is invalid. For example:

input.invalid {
    border-color: red;
}

This will add a red border to the input element when it is invalid.

Note that in this example, the required attribute is added to the name input field to ensure that the field is not left empty when the form is submitted.

Property

There is an onblur property that can be used to attach an event handler function to the blur event for an element:

const inputElement = document.querySelector('#myInput');

inputElement.onblur = function(event) {
    // Perform some action when the input field loses focus
    console.log('Input field has lost focus');
};

Here, the onblur property is used to assign an anonymous function as the event handler for the blur event of the inputElement.

Inline

The blur event can be used inline in HTML as well. For example:

CSS

input:focus {
    border-color: #333;
}

HTML

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required onblur="validateName(this)">
    <button type="submit">Submit</button>
</form>

JavaScript

function validateName(input) {
    if (input.validity.valid) {
        input.classList.remove('invalid');
    } else {
        input.classList.add('invalid');
    }
}

Here, the onblur attribute is added to the name input field. This attribute contains JavaScript code that will be executed when the blur event is triggered. In this case, the code calls the validateName() function and passes the input field as an argument. The validateName() function performs the same validation as in the previous example.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

You can use the blur() method to programmatically trigger the blur event on an element. For example:

const nameInput = document.getElementById('name');

nameInput.blur();

Here, the blur() method is called on the nameInput element, which will trigger the blur event on that element. You can use this method to simulate user actions or automate interactions with your application.

Note that calling blur() will remove focus from the element, so it is important to consider the context in which you use it. For example, if you're using it to validate a form field, you may want to call it only when the user has entered valid input, to avoid confusing error messages.

javascript