Hướng dẫn tạo Auto Resize Textarea bằng HTML, CSS và JavaScript

Auto Resize Textarea là gì?

Auto Resize Textarea là một textarea có khả năng tự co giãn chiều cao dựa trên số lượng dòng văn bản đang có trong nó. Điều này giúp nội dung được hiển thị đầy đủ mà không bị ẩn sau thanh cuộn, đồng thời tạo trải nghiệm tự nhiên và mượt mà cho người dùng.

Tính năng này đặc biệt phù hợp với:

• Form nhập bình luận.
• Khung chat hoặc tin nhắn.
• Khu vực nhập ghi chú dài.
• Các giao diện yêu cầu hiển thị nội dung tức thì.

Cách hoạt động của Auto Resize Textarea

Textarea có thuộc tính scrollHeight, cho biết chiều cao thực tế của nội dung bên trong. Bằng cách mỗi khi người dùng gõ phím, JavaScript sẽ:

1. Đặt chiều cao textarea về auto để bỏ giới hạn cũ.
2. Lấy giá trị scrollHeight.
3. Gán chiều cao textarea = scrollHeight nhằm mở rộng đủ để nội dung hiển thị hết.

Nhờ vậy, textarea luôn “vừa khít” với nội dung mà không cần thanh cuộn.

Cấu trúc HTML đơn giản

Dưới đây là cấu trúc HTML tối giản cho Auto Resize Textarea:

<div class="auto-textarea-box">
    <label for="auto-textarea">Nhập nội dung</label>
    <textarea id="auto-textarea" rows="1" placeholder="Gõ nội dung vào đây..."></textarea>
</div>

Textarea được đặt rows="1" để ban đầu chỉ cao một dòng, sau đó tự động mở rộng theo nội dung nhập vào.

CSS cơ bản cho Textarea

Textarea cần được thiết kế phù hợp để hiệu ứng co giãn hoạt động mượt mà và không bị giật. Ví dụ CSS dưới đây mang tính chất minh họa:

.auto-textarea-box {
    max-width: 480px;
    margin: 16px 0;
}

.auto-textarea-box label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.auto-textarea-box textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    font-family: system-ui, sans-serif;
}

Lưu ý quan trọng:

• resize: none để người dùng không thay đổi kích thước thủ công.
• overflow: hidden để ẩn thanh cuộn nội bộ.

JavaScript để tự động mở rộng chiều cao

Để textarea tự co giãn theo nội dung, đoạn JavaScript dưới đây xử lý sự kiện input:

(function() {
    var textarea = document.getElementById("auto-textarea");

    function autoResize() {
        textarea.style.height = "auto";
        textarea.style.height = textarea.scrollHeight + "px";
    }

    textarea.addEventListener("input", autoResize);

    autoResize();
})();

Hàm autoResize() đảm bảo rằng mỗi lần nội dung thay đổi, textarea mở rộng ngay lập tức mà không bị nhảy kích thước đột ngột.

Demo Auto Resize Textarea

Dưới đây là phiên bản demo để người đọc thử nghiệm trực tiếp. Textarea sẽ tự động mở rộng khi gõ thêm nội dung mà không cần dùng thanh cuộn.

Mở rộng tính năng

Từ phiên bản cơ bản trên, có thể phát triển thêm nhiều cải tiến:

• Giới hạn chiều cao tối đa và bật thanh cuộn nếu vượt quá.
• Thêm hiệu ứng chuyển động nhẹ bằng transition.
• Hỗ trợ nhiều textarea trên cùng một trang bằng cách chọn theo class.
• Tự động reset chiều cao khi textarea bị xóa hoàn toàn nội dung.

Kết luận

Auto Resize Textarea là một kỹ thuật đơn giản nhưng rất hữu ích cho trải nghiệm người dùng.

Bằng cách sử dụng thuộc tính scrollHeight kết hợp với sự kiện input, textarea có thể tự động điều chỉnh chiều cao theo nội dung một cách mượt mà.

Tính năng này được sử dụng rộng rãi trong các ứng dụng chat, ghi chú và form bình luận, giúp giao diện hiện đại và thân thiện hơn.