JavaScript onblur Event: Element Lost Focus

JavaScript onblur Event: Handling Element Focus Loss

The JavaScript onblur event is a fundamental part of handling user interactions within web forms and other interactive elements. It triggers when an element loses focus, such as when a user clicks outside the element, tabs to a different element, or programmatically shifts focus. This event allows developers to perform actions like validating form input, saving drafts, or hiding unnecessary information when the user shifts their attention elsewhere. In this article, we will delve into the intricacies of the onblur event, exploring its syntax, attributes, and real-world applications.

What is the onblur Event?

The onblur event is a DOM (Document Object Model) event that occurs when an element loses focus. Focus loss can happen due to various reasons:

• Clicking outside: The user clicks anywhere outside the focused element.
• Tabbing out: The user presses the Tab key to shift focus to the next element.
• Programmatic focus changes: The focus is programmatically changed to another element using JavaScript’s focus() method.

This event is particularly useful for:

• Form Validation: Validating input fields after the user has moved away from them.
• Autosave: Automatically saving form data as the user progresses through the form.
• User Interface (UI) Feedback: Hiding and showing UI elements based on focus state.

Purpose of the onblur Event

The primary purpose of the onblur event is to provide a mechanism for handling focus loss, allowing developers to react and trigger specific actions based on this change. Key purposes include:

• Enhancing User Experience: Making forms more user-friendly and interactive.
• Data Integrity: Ensuring data is valid and consistent as it is entered.
• Dynamic UI Management: Dynamically updating the interface based on user interactions.

Syntax of the onblur Event

The onblur event can be added to HTML elements in several ways:

1. Inline HTML Attribute: Directly in the HTML tag using the onblur attribute.

   <input type="text" onblur="myFunction()" />
   

2. JavaScript Property Assignment: Accessing the element through the DOM and assigning the event handler using the onblur property.

   const element = document.getElementById('myInput');
   element.onblur = function() {
     // Event handling logic here
   };
   

3. addEventListener Method: The recommended way for attaching event handlers, allowing multiple functions to be attached to the same event.

   const element = document.getElementById('myInput');
   element.addEventListener('blur', function() {
       // Event handling logic here
   });
   

Common Elements that Support onblur

Most interactive elements in HTML support the onblur event, including but not limited to:

• <input> (all types)
• <select>
• <textarea>
• <button>
• <a>
• Any element with the tabindex attribute

The Event Object

When an onblur event occurs, it creates an event object that can be passed to the event handler function. This object contains properties that provide information about the event. The most commonly used properties are:

Property	Type	Description
`target`	Element	The element that lost focus (fired the event).
`type`	String	The type of the event, which is `”blur”` for `onblur` events.
`timeStamp`	Number	The time at which the event occurred, in milliseconds since the epoch.
`relatedTarget`	Element | null	The element gaining focus, or null if no element is gaining focus.

Examples of the onblur Event

Let’s illustrate how to use the onblur event with practical examples.

Basic onblur Event

In this example, we display an alert message when an input field loses focus.

<input
  type="text"
  id="basicInput"
  placeholder="Enter your name"
  style="border: 1px solid #ccc; padding: 8px;"
/>
<script>
  const basicInput = document.getElementById('basicInput');
  basicInput.addEventListener('blur', function () {
    alert('Input field lost focus.');
  });
</script>

Try typing something in the text field and then clicking outside it. An alert message will pop up.

Form Validation with onblur

This example shows how to use the onblur event for basic form validation. We check if the input field is empty, and if so, display an error message.

<input
  type="text"
  id="validateInput"
  placeholder="Enter something"
  style="border: 1px solid #ccc; padding: 8px;"
/>
<span id="errorMsg" style="color: red; margin-left: 10px;"></span>
<script>
  const validateInput = document.getElementById('validateInput');
  const errorMsg = document.getElementById('errorMsg');

  validateInput.addEventListener('blur', function () {
    if (!validateInput.value.trim()) {
      errorMsg.textContent = 'This field cannot be empty.';
    } else {
      errorMsg.textContent = '';
    }
  });
</script>

Try entering nothing in the text field, and click outside. An error message will appear.

Autosaving Data with onblur

This example demonstrates how the onblur event can be used for autosaving user input to a local variable.

<textarea
  id="autosaveText"
  placeholder="Type something here..."
  style="border: 1px solid #ccc; padding: 8px; width: 300px; height: 100px;"
></textarea>
<div id="autosaveDisplay" style="margin-top: 10px;">Saved text:</div>

<script>
  const autosaveText = document.getElementById('autosaveText');
  const autosaveDisplay = document.getElementById('autosaveDisplay');
  let savedText = '';

  autosaveText.addEventListener('blur', function () {
    savedText = autosaveText.value;
    autosaveDisplay.textContent = 'Saved text: ' + savedText;
  });
</script>

Type something in the text area and then click outside. You’ll see the saved text updated below.

Dynamic UI Updates

In this example, we’ll change the background color of an input field when it loses focus, using the onblur event.

<input
  type="text"
  id="styleInput"
  placeholder="Focus on this field"
  style="border: 1px solid #ccc; padding: 8px;"
/>
<script>
  const styleInput = document.getElementById('styleInput');
  styleInput.addEventListener('focus', function () {
    styleInput.style.backgroundColor = 'lightblue';
  });
  styleInput.addEventListener('blur', function () {
    styleInput.style.backgroundColor = 'white';
  });
</script>

Click in the input field, and then outside to see the background color changes.

relatedTarget Example

This example illustrates how the relatedTarget property can be used to determine which element gains focus after the current element loses focus.

<input type="text" id="focusField1" placeholder="Field 1" style="border: 1px solid #ccc; padding: 8px;"/>
<input type="text" id="focusField2" placeholder="Field 2" style="border: 1px solid #ccc; padding: 8px;"/>
<div id="relatedTargetInfo" style="margin-top: 10px;"></div>
<script>
const focusField1 = document.getElementById('focusField1');
const focusField2 = document.getElementById('focusField2');
const relatedTargetInfo = document.getElementById('relatedTargetInfo');

focusField1.addEventListener('blur', function(event) {
  if (event.relatedTarget) {
    relatedTargetInfo.textContent = 'Field 1 lost focus. Next focused element: ' + event.relatedTarget.id;
  } else {
    relatedTargetInfo.textContent = 'Field 1 lost focus. No element gained focus.'
  }
});

focusField2.addEventListener('blur', function(event) {
    if (event.relatedTarget) {
      relatedTargetInfo.textContent = 'Field 2 lost focus. Next focused element: ' + event.relatedTarget.id;
    } else {
      relatedTargetInfo.textContent = 'Field 2 lost focus. No element gained focus.'
    }
  });
</script>

Try tabbing between the two input fields. The message will indicate which field has received focus after losing focus from other. Click anywhere else in the page and you will see, ‘No element gained focus’.

Best Practices

• Use addEventListener: It’s the preferred method for attaching event handlers because it allows multiple functions to be attached to the same event, and makes it easier to manage.
• Handle relatedTarget Carefully: Always check if relatedTarget is present before using it, as it might be null if no new element gains focus.
• Trim Input Values: Use .trim() to remove leading/trailing white spaces when validating input values.
• Avoid Blocking Operations: Keep onblur event handlers lightweight and efficient to avoid UI freezes.
• Provide Meaningful Feedback: Display clear error messages to help users correct their mistakes.

Browser Support

The onblur event is universally supported by all modern browsers. This event has been a part of web development standards since the early days, so you don’t have to worry about compatibility issues.

Note: While compatibility is generally excellent, always test your code across different browsers and devices to ensure consistent behavior. 🧐

Conclusion

The onblur event is a vital tool for creating dynamic and interactive web applications. Whether you are validating form data, saving drafts, or updating the user interface, understanding and using the onblur event effectively will enhance your web development capabilities. This comprehensive guide should provide you with a strong foundation to start using onblur in your projects. Happy coding!