GIẢI PHÁP HOÀN THÀNH YÊU CẦU ĐƠN GIẢN
Cập nhật 2020-05-14
(Cải thiện hỗ trợ trình duyệt cho điện thoại di động và máy tính bảng)
Đoạn mã sau sẽ hoạt động:
- Trên đầu vào chính.
- Với văn bản dán (nhấp chuột phải & ctrl + v).
- Với văn bản cắt (nhấp chuột phải & ctrl + x).
- Với văn bản được tải sẵn.
- Với tất cả các textarea (hộp văn bản nhiều dòng) trang web .
- Với Firefox (v31-67 đã thử nghiệm).
- Với Chrome (v37-74 đã thử nghiệm).
- Với IE (v9-v11 đã thử nghiệm).
- Với Edge (v14-v18 đã thử nghiệm).
- Với Safari Safari .
- Với trình duyệt Android .
- Với chế độ nghiêm ngặt JavaScript .
- Là w3c xác nhận.
- Và được sắp xếp hợp lý và hiệu quả.
TÙY CHỌN 1 (Với jQuery)
Tùy chọn này yêu cầu jQuery và đã được thử nghiệm và đang hoạt động với 1.7.2 - 3.3.1
Đơn giản (Thêm mã jquery này vào tệp tập lệnh chính của bạn và quên nó đi.)
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
Test on jsfiddle
TÙY CHỌN 2 (JavaScript thuần)
Đơn giản (Thêm JavaScript này vào tệp tập lệnh chính của bạn và quên nó đi.)
const tx = document.getElementsByTagName('textarea');
for (let i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
Test on jsfiddle
TÙY CHỌN 3 (Tiện ích mở rộng jQuery)
Hữu ích nếu bạn muốn áp dụng thêm chuỗi cho văn bản mà bạn muốn có kích thước tự động.
jQuery.fn.extend({
autoHeight: function () {
function autoHeight_(element) {
return jQuery(element)
.css({ 'height': 'auto', 'overflow-y': 'hidden' })
.height(element.scrollHeight);
}
return this.each(function() {
autoHeight_(this).on('input', function() {
autoHeight_(this);
});
});
}
});
Gọi với $('textarea').autoHeight()
CẬP NHẬT JAVASCRIPT VĂN BẢN
Khi đưa nội dung vào một vùng văn bản thông qua JavaScript sẽ nối thêm đoạn mã sau để gọi hàm trong tùy chọn 1.
$('textarea').trigger('input');
PRESET TEXTAREA HEIGHT
Để sửa chiều cao ban đầu của textarea, bạn sẽ cần thêm một điều kiện bổ sung:
const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
if (tx[i].value == '') {
tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
} else {
tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
}
tx[i].addEventListener("input", OnInput, false);
}
function OnInput(e) {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>