在正常情况下，我们都会给textarea文本框设定一个指定的高度，然后当输入的内容超过设定的高度时，就会出现滚动条。显然这样的设置显示是不太美观的，因此就会有给textarea文本框实现随着内容的多少而自动适应其高度的需求。
而textarea本身是没有这个功能的，所以我们就需要利用js动态的为textarea文本框设置自适应的高度，下面为实现的方法解决代码。
HTML代码：
<textarea id="textarea"></textarea>
JavaScript代码：
function makeExpandingArea(el) {
var timer = null;
//由于ie8有溢出堆栈问题，故调整了这里
var setStyle = function(el, auto) {
if (auto) el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
}
var delayedResize = function(el) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
setStyle(el)
}, 200);
}
if (el.addEventListener) {
el.addEventListener('input', function() {
setStyle(el, 1);
}, false);
setStyle(el)
} else if (el.attachEvent) {
el.attachEvent('onpropertychange', function() {
setStyle(el)
})
setStyle(el)
}
if (window.VBArray && window.addEventListener) { //IE9
el.attachEvent("onkeydown", function() {
var key = window.event.keyCode;
if (key == 8 || key == 46) delayedResize(el);
});
el.attachEvent("oncut", function() {
delayedResize(el);
}); //处理粘贴
}
}
//调用
var textarea = document.getElementById('textarea');
makeExpandingArea(textarea);P.S.
这种写法是兼容当前大部分浏览器的，不过目前发现只有IE11是不支持的，当IE11使用以上JS代码的时候会出现对象不支持“attachEvent”属性或方法
这时我们只需要在<head>中添加
<meta http-equiv="X-UA-Compatible" content="IE=10" />
可以规避该问题。
最简单的方法
使用了element ui的控件
<el-input type="textarea" v-model="createForm.desc" autosize></el-input>
这样也能做到内容自适应效果。
以上就是关于“textarea文本框的高度随内容自适应增高撑开”相关的内容，希望对您有所帮助。
还没有评论，来说两句吧...