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

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

Cú pháp

Cú pháp như sau:

<tagname onfocus="script"></tagname>

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
    }
    textarea {
      border: 2px solid #fff;
      background: transparent;
      font-size: 1rem;
    }
    ::placeholder {
      color: #000;
      font-size: 1rem;
    }
  </style>
</head>
<body>
<h1>Demo thuộc tính sự kiện onfocus trong HTML</h1>
<textarea placeholder="Nhập tin nhắn của bạn ở đây" onfocus="focusFn()" rows='8' cols="50"></textarea>
<script>
  function focusFn() {
    document.querySelector('textarea').style.background = '#ffffff36';
  }
</script>
</body>
</html>

Kết quả

Bây giờ hãy click vào khu vực văn bản để quan sát cách thuộc tính sự kiện onfocus hoạt động.