HTML onblur Attribute

Introduction

The onblur attribute is an inline event handler that runs JavaScript when the blur event fires. That happens when a focusable element loses focus—for example when the user tabs to the next field or clicks outside an input. It is widely used for form validation, showing hints, or updating UI after editing. Pair it with onfocus for highlight-and-validate flows. The blur event does not bubble; use focusout if you need delegation on a parent.

What You’ll Learn

Purpose of onblur Attribute

The primary purpose of onblur is to react when the user finishes interacting with a field—without waiting for form submit. Common uses include validating email format, checking required fields, formatting phone numbers, or removing a focus highlight. Because blur fires when focus moves away, it feels natural for “check this when I’m done typing here” feedback.

Do not confuse onblur with onbeforeunload. Blur is for individual elements losing focus inside the page. beforeunload is for leaving the entire page. Also note that blur does not bubble, unlike focusout.

📝 Syntax

Set onblur on a focusable element or assign element.onblur:

<script>

  function validateEmail() {

    const email = document.getElementById("email").value;

    console.log("Validate:", email);

  }

</script>



<label for="email">Email</label>

<input type="email" id="email" onblur="validateEmail()">

Syntax Rules

• Value is JavaScript code executed when the element loses focus.
• Works on focusable elements: input, textarea, select, button, a.
• Pair with onfocus / focus for enter-and-leave field behavior.
• JavaScript: element.onblur = function() { … }.
• Modern alternative: element.addEventListener("blur", handler).
• blur does not bubble; use focusout on a parent for delegation.

💎 Values

The onblur attribute accepts a string of JavaScript code:

• onblur="validateEmail()" — Call a named function.
• onblur="this.classList.remove('focused')" — Inline statement.
• JavaScript: field.onblur = () => { … } assigns the handler.

const email = document.getElementById("email");

email.addEventListener("blur", () => {

  if (!email.value.includes("@")) {

    email.setAttribute("aria-invalid", "true");

  }

});

email.addEventListener("focus", () => {

  email.removeAttribute("aria-invalid");

});

Applicable Elements

onblur vs onfocus vs onchange

Examples Gallery

Inline onblur email validation, addEventListener on an input, and pairing with onfocus.

<label for="email">Email</label>

<input type="email" id="email" onblur="validateEmail()">



<script>

  function validateEmail() {

    const value = document.getElementById("email").value;

    console.log("Validate:", value);

  }

</script>

<script>

  document.getElementById("name").addEventListener("blur", function () {

    console.log("Field lost focus:", this.value);

  });



  // Or property form:

  document.getElementById("name").onblur = function () { /* … */ };

</script>

field.addEventListener("focus", () => {

  field.classList.add("is-focused");

});



field.addEventListener("blur", () => {

  field.classList.remove("is-focused");

  validate(field);

});

♿ Accessibility

• Announce errors on blur — Link validation messages with aria-describedby and set aria-invalid="true" when validation fails.
• Do not rely on color alone — Pair error styling with visible text so screen reader users get feedback.
• Avoid alert() on blur — Inline error text near the field is more accessible than modal alerts.
• Keyboard navigation — Blur fires when tabbing away; ensure tab order is logical before validating.
• Focus management — Do not trap focus or move it unexpectedly in blur handlers.

💡 Best Practices