HTML onblur Event Attribute

HTML Web Development Front End Technology

The HTML onblur attribute is used when an HTML element loses focus in an HTML document.

Syntax

Following is the syntax −

<tagname onblur=”script”></tagname>

Example

Let us see an example of HTML onblur event Attribute −

Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      padding: 20px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
</head>
<body>
<h1>HTML onblur Event Attribute Demo</h1>
<button onblur="blurFn()" class="btn" onclick='clickFn()'>Click me</button>
<div class="show"></div>
<script>
   function blurFn() {
      var msg = document.querySelector('.show');
      msg.innerHTML = "";
      msg.innerHTML = "Now you loses focus from me";
   }
   function clickFn() {
      var msg = document.querySelector('.show');
      msg.innerHTML = "";
      msg.innerHTML = "Hey! you clicked me";
   }
</script>
</body>
</html>