Javascript Element onblur

The onblur event is a Javascript event triggered when an element loses focus. This event is commonly used to validate user input or perform some action when a user leaves a particular input field.

Syntax

The syntax for using the onblur event is as follows:

element.onblur = function() {
  // code to execute when the element loses focus
}

Here, element refers to the HTML element you want to attach the event handler to, and the anonymous function contains the code you want to execute when the element loses focus.

Example

To illustrate how the onblur event can be used, let's create a simple form with a text input field and a button. We want to validate the user's input by ensuring that the text input is not empty when the user clicks the button.

<form>
  <label>Enter your name:</label>
  <input id="name-input" type="text">
  <button id="submit-button">Submit</button>
</form>

We'll attach an event handler to the submit button that checks if the input field is empty when the user clicks the button. If the input field is empty, we'll display an error message to the user.

const nameInput = document.getElementById('name-input');
const submitButton = document.getElementById('submit-button');

submitButton.onclick = function() {
  if (nameInput.value === '') {
    alert('Please enter your name');
    nameInput.focus();
  }
};

Here, we're using the onclick event to attach a function to the submit button that checks if the nameInput element's value is empty. If it is, we display an error message to the user using the alert function and set the focus back to the nameInput element using the focus method.

However, this validation only occurs when the user clicks the submit button. We can use the onblur event to perform the same validation when the user leaves the nameInput element.

nameInput.onblur = function() {
  if (nameInput.value === '') {
    alert('Please enter your name');
    nameInput.focus();
  }
};

Here, we're attaching an anonymous function to the onblur event of the nameInput element. We perform the same validation as before, but now it occurs when the user leaves the input field instead of when they click the submit button.

Conclusion

The onblur event is a powerful tool for validating user input and performing actions when a user leaves a particular input field. By using this event, you can create more fluid and user-friendly web applications that respond to user input in real-time.