Open In App

HTML DOM onblur Event

Last Updated : 26 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Next Article
HTML DOM onfocus Event

V
Vijay Sirra
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox