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

Thuộc tính defaultValue của đối tượng HTMLTextAreaElement đại diện cho **giá trị mặc định (ban đầu)** của textarea — tương ứng với nội dung văn bản giữa thẻ <textarea>...</textarea> trong HTML. Khác với value (giá trị hiện tại, thay đổi khi user gõ), defaultValue **không thay đổi** trừ khi gán qua JS hoặc reset form.

Cú pháp

// Lấy giá trị mặc định
var def = textarea.defaultValue;

// Đặt giá trị mặc định mới
textarea.defaultValue = "Giá trị mặc định mới";

Ví dụ: Thay đổi defaultValue động

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; 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.defaultValue</h1>
  <textarea rows="5" cols="40">Giá trị mặc định ban đầu</textarea>
  <button onclick="changeDefault()" class="btn">Đổi defaultValue</button>
  <button onclick="resetForm()" class="btn" style="margin-top:0.5rem">Reset form</button>
  <script>
    function changeDefault() {
      var ta = document.querySelector("textarea");
      ta.defaultValue = "Đã đổi defaultValue lúc " + new Date().toLocaleTimeString();
      // value hiện tại KHÔNG thay đổi ngay
    }
    function resetForm() {
      // Reset form sẽ khôi phục value = defaultValue
      ta.form.reset();
    }
  </script>
</body>
</html>

Kết quả:

Ban đầu: Textarea hiển thị "Giá trị mặc định ban đầu".
Nhấn "Đổi defaultValue": defaultValue thay đổi, nhưng nội dung hiển thị (value) **giữ nguyên**.
Nhấn "Reset form": Nội dung nhảy về defaultValue mới.

defaultValue vs value

Đặc điểm	defaultValue	value
Nguồn gốc	HTML nội dung ban đầu	HTML ban đầu + thay đổi user/JS
Thay đổi khi user gõ	Không	Có
Thay đổi qua JS	Có (`ta.defaultValue = ...`)	Có (`ta.value = ...`)
Khi `form.reset()`	Giữ nguyên	Trở về `defaultValue`
Khi submit form	Không gửi (chỉ `value` gửi)	Gửi đi

Ứng dụng

Kiểm tra user có thay đổi nội dung không: if (ta.value !== ta.defaultValue) { // đã sửa }
Khôi phục giá trị gốc: ta.value = ta.defaultValue (nút "Hủy thay đổi").
Đặt mẫu (template) động: load template từ server → gán defaultValue → user chỉnh sửa → submit.