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

Thuộc tính sự kiện onsearch trong HTML được kích hoạt khi người dùng nhấn phím "Enter" trong một phần tử HTML input với type="search" trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

<input type="search" onsearch="script">

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
    }
    input {
      border: 2px solid #fff;
      background: transparent;
      height: 2rem;
      padding: 10px;
      width: 200px;
    }
    ::placeholder {
      color: #000;
    }
    .show {
      font-size: 1.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
<h1>Demo thuộc tính sự kiện onsearch trong HTML</h1>
<input type="search" onsearch="searchFn()" placeholder="Tìm kiếm ở đây">
<p>Nhập nội dung bạn muốn tìm kiếm và sau đó nhấn phím "Enter"</p>
<div class="show"></div>
<script>
  function searchFn() {
    document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
    document.querySelector(".show").innerHTML = "Bạn tìm kiếm: " + document.querySelector("input").value;
  }
</script>
</body>
</html>

Kết quả

Nhập văn bản tìm kiếm của bạn vào trường tìm kiếm và sau đó nhấn phím "Enter" để quan sát cách thuộc tính sự kiện onsearch hoạt động.