HTML DOM onblur Event

The HTML DOM onblur event occurs when an object loses focus. The onblur event is the opposite of the onfocus event. The onblur event is mostly used with form validation code (e.g. when the user leaves a form field).

In HTML:

<element onblur="myScript">

html

<!DOCTYPE html>
<html lang="en">
<body>
 Email:
 <input type="email" id="email" onblur="myFunction()">
 <script>
  function myFunction() {
   alert("Focus lost");
  }
 </script>
</body>
</html>

In JavaScript:

object.onblur = function(){myScript};

html

<!DOCTYPE html>
<html lang="en">
<body>
 <input type="email" id="email">
 <script>
  document.getElementById("email").onblur = function () {
   myFunction()
  };

  function myFunction() {
   alert("Input field lost focus.");
  }
 </script>
</body>
</html>

In JavaScript, using the addEventListener() method:

object.addEventListener("blur", myScript);

html

<!DOCTYPE html>
<html lang="en">
<body>
 <input type="email" id="email">
 <script>
  document.getElementById(
   "email").addEventListener("blur", myFunction);

  function myFunction() {
   alert("Input field lost focus.");
  }
 </script>
</body>
</html>

Explore