一个完整而简单的解决方案
更新2022-08-30
(默认增加了单行多文本框的支持)
下面的代码将工作:
按键输入。
粘贴文本(右键单击并ctrl+v)。
剪切文本(右键单击并ctrl+x)。
与预加载文本。
与所有的文本区域(多行文本框的)网站宽。
使用Firefox (v31-109测试)。
Chrome (v37-108测试)。
使用IE (v9-v11测试)。
使用Edge (v14-v108测试)。
IOS Safari。
Android浏览器。
JavaScript严格模式。
选项1(使用jQuery)
此选项需要jQuery，并且已经过测试，适用于1.7.2 - 3.6.3
简单(将jQuery代码添加到主脚本文件中，然后忘记它)。
$("textarea").each(function () {
this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
this.style.height = 0;
this.style.height = (this.scrollHeight) + "px";
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.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>
在jsfiddle上测试
OPTION 2(纯JavaScript)
简单(将此JavaScript添加到主脚本文件中，然后忘记它)。
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 = 0;
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>
在jsfiddle上测试
选项3 (jQuery扩展)
如果你想应用进一步的链接到文本区域，你想自动调整大小。
jQuery.fn.extend({
autoHeight: function () {
function autoHeight_(element) {
return jQuery(element)
.css({ "height": 0, "overflow-y": "hidden" })
.height(element.scrollHeight);
}
return this.each(function() {
autoHeight_(this).on("input", function() {
autoHeight_(this);
});
});
}
});
使用$("textarea")调用。autoheight ()
通过javascript更新文本区域
当通过JavaScript向文本区域注入内容时，添加以下代码来调用选项1中的函数。
$("textarea").trigger("input");
预设文本区域高度
要修复文本区域的初始高度，你需要添加另一个条件:
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 = 0;
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>
