Thuộc tính sự kiện onblur trong HTML

Thuộc tính sự kiện onblur trong HTML được sử dụng khi một phần tử HTML mất focus (mất tiêu điểm) trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

<tagname onblur="script"></tagname>

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính sự kiện onblur trong HTML:

<!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>Demo thuộc tính sự kiện onblur trong HTML</h1>
<button onblur="blurFn()" class="btn" onclick='clickFn()'>Nhấn vào tôi</button>
<div class="show"></div>
<script>
  function blurFn() {
    var msg = document.querySelector('.show');
    msg.innerHTML = "";
    msg.innerHTML = "Bây giờ bạn đã mất focus khỏi tôi";
  }
  function clickFn() {
    var msg = document.querySelector('.show');
    msg.innerHTML = "";
    msg.innerHTML = "Hey! bạn vừa nhấn vào tôi";
  }
</script>
</body>
</html>

Kết quả

Nhấn vào nút "Nhấn vào tôi" để hiển thị một số văn bản.

Bây giờ nhấp vào nơi khác và bạn sẽ mất focus khỏi nút bấm.