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

Thuộc tính wrap của đối tượng HTMLTextAreaElement quy định **cách xử lý xuống dòng** khi nội dung textarea được **gửi đi (submit form)**. Chỉ ảnh hưởng đến giá trị submit, không ảnh hưởng hiển thị.

Cú pháp

// Lấy giá trị
var mode = textarea.wrap;

// Đặt giá trị
textarea.wrap = "soft"; // hoặc "hard", "off"

Các giá trị

Giá trị	Hành vi khi submit
`soft` (mặc định)	Văn bản hiển thị có xuống dòng (wrap), nhưng không chèn ký tự xuống dòng thực vào giá trị gửi. Gửi liền mạch.
`hard`	Chèn ký tự xuống dòng (\n) vào giá trị gửi tại mỗi vị trí xuống dòng hiển thị (dựa trên `cols`). Yêu cầu thuộc tính `cols`.
`off`	Không wrap hiển thị (thanh cuộn ngang), không chèn xuống dòng khi submit.

Ví dụ: Xem giá trị wrap

<!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 0; }
  .show { font-size: 1.5rem; margin: 1rem 0; }

<body>
  <h1>Demo: textarea.wrap</h1>
  <form action="" method="post">
    <textarea rows="5" cols="28" wrap="soft">
Dòng 1: Nội dung ngắn
Dòng 2: Nội dung rất dài sẽ tự xuống dòng khi hiển thị vì cols=28
Dòng 3: Kết thúc
    </textarea>
    <input type="submit" class="btn" value="Gửi form">
  </form>
  <button onclick="showWrap()" class="btn">Hiện giá trị wrap</button>
  <div class="show" id="result"></div>
  <script>
    function showWrap() {
      var w = document.querySelector("textarea").wrap;
      document.getElementById('result').textContent = "wrap = '" + w + "'";
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hiển thị: wrap = 'soft'

Minh họa sự khác biệt soft vs hard

Giả sử cols="20", người dùng gõ: "Xin chào các bạn" (16 ký tự, không xuống dòng).

wrap="soft": Gửi nguyên chuỗi "Xin chào các bạn".
wrap="hard": Trình duyệt **tự chèn \n** sau 20 ký tự → Gửi "Xin chào các \nbạn" (nếu đủ dài để wrap).

Lưu ý

wrap="hard" **bắt buộc có cols** — nếu thiếu, hành vi không xác định.
Đối với dữ liệu JSON/API, thường dùng wrap="soft" (mặc định) để không làm thay đổi dữ liệu.
wrap không ảnh hưởng đến textarea.value khi đọc bằng JS — chỉ ảnh hưởng khi **submit form natively** (không phải AJAX).