Tự động resize chiều cao textarea bằng javascript

1. Thêm CSS cho textarea

1
2
3
4
5

textarea { 
	resize: none; 
	overflow: hidden; 
	box-sizing: border-box; 
}

– resize: none => không cho thay đổi chiều ngang textarea
– overflow: hidden => làm ẩn thanh scroll
– box-sizing: border-box => thiết lập cho height sẽ bao gồm cho cả phần nội dung, padding và border nhưng không bao gồm margin

2. Đoạn javascript xử lý thay đổi chiều cao textarea

1
2
3
4
5
6
7

var textarea = document.querySelectorAll('textarea'); 
textarea.forEach(function(item) { 
	item.style.height = item.scrollHeight + "px"; 
	if (item.clientHeight < item.scrollHeight) { 
		item.style.height = (item.scrollHeight * 2 - item.clientHeight) + "px"; 
	} 
});

– clientHeight: chiều cao hiển thị tại thời điểm đó của Textarea
– scrollHeight: chiều cao tối thiểu hiển thị tất cả nội dung trong Textarea mà không cần scroll
=> Nếu hiển thị hết nội dung trong Textarea mà không cần scroll thì scrollHeight bé hơn hoặc bằng clientHeight
(scrollHeight * 2 – clientHeight) = scrollHeight + (scrollHeight – clientHeight)

Tham khảo ví dụ dưới:
(Nếu không hiển thị kết quả trong Result hãy bấm nút Rerun phía dưới)

``