Thực thi script khi phần tử nhận focus trong HTML (onfocus)

Để chạy script khi một phần tử nhận được focus (ví dụ: người dùng click vào ô input hoặc tab đến nó), bạn sử dụng thuộc tính sự kiện onfocus.

Ví dụ minh họa

<!DOCTYPE html>
<html>
  <body>
    <p>Nhập tên môn học bên dưới:</p>
    Môn học: <input type="text" id="sname" onfocus="display(this.id)">
    <br>
    <script>
      function display(val) {
        // Đổi màu nền thành xanh khi focus
        document.getElementById(val).style.background = "blue";
        document.getElementById(val).style.color = "white"; // Thêm để chữ đọc được
      }
    </script>
  </body>
</html>

Ứng dụng thực tế

• Highlight ô nhập liệu đang active (đổi border, background).
• Hiển thị gợi ý/tooltip khi người dùng focus vào trường.
• Xóa placeholder text tùy chỉnh.
• Kích hoạt validation real-time.

Sự kiện liên quan

• onblur - Kích hoạt khi phần tử mất focus.
• onfocusin / onfocusout - Phiên bản có hỗ trợ bubbling (nổi bọt).