Thuộc tính autofocus của Textarea trong HTML DOM

Thuộc tính autofocus của đối tượng HTMLTextAreaElement cho phép **lấy hoặc đặt** việc textarea có tự động nhận focus khi trang tải xong hay không. Chỉ **một** phần tử trong trang được autofocus (trình duyệt ưu tiên phần tử đầu tiên).

Cú pháp

// Lấy giá trị (boolean)
var focused = textarea.autofocus;

// Đặt giá trị
textarea.autofocus = true;  // hoặc false

Ví dụ: Bật/tắt autofocus động

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }

<body>
  <h1>Demo: textarea.autofocus</h1>
  <textarea autofocus rows="4" cols="40">Tự động focus khi tải trang</textarea>
  <button onclick="toggleAutofocus()" class="btn">Tắt autofocus</button>
  <script>
    function toggleAutofocus() {
      var ta = document.querySelector("textarea");
      ta.autofocus = !ta.autofocus;
      // Lưu ý: Thay đổi autofocus sau khi trang đã load KHÔNG làm focus ngay lập tức.
      // Chỉ có hiệu lực khi tải lại trang.
      alert("autofocus hiện tại: " + ta.autofocus + " (hiệu lực khi reload)");
    }
  </script>
</body>
</html>

Kết quả:

1. Tải trang: Con trỏ nháy trong textarea ngay lập tức.
2. Nhấn nút: Thay đổi thuộc tính, alert hiển thị giá trị mới. Cần reload để thấy hiệu ứng.

Lưu ý quan trọng

• autofocus là **boolean attribute** trong HTML: viết <textarea autofocus> = true, không viết = false.
• Thay đổi qua JS chỉ ảnh hưởng đến lần tải trang sau, không focus ngay lập tức. Để focus ngay: textarea.focus().
• Chỉ một phần tử trên trang có autofocus hiệu lực (thường là phần tử đầu tiên trong DOM).
• Trên mobile, autofocus có thể không hoạt động hoặc bị chặn để tránh bật bàn phím ảo bất ngờ.

So sánh autofocus vs focus()