Computer >> Máy Tính >  >> Lập trình >> HTML

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

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

Cú pháp

Sau đây là cú pháp -

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

Ví dụ

Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện onblur 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>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>

Đầu ra

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

Nhấp vào “ Nhấp vào tôi ”Để hiển thị một số văn bản.

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

Bây giờ hãy nhấp vào một nơi khác và bạn sẽ mất tiêu điểm từ nút.

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