div 左右排列高度自适应_textarea高度随内容自适应增高撑开

最新推荐文章于 2023-04-26 11:06:25 发布

weixin_39598584

最新推荐文章于 2023-04-26 11:06:25 发布

阅读量150

点赞数

文章标签： div 左右排列高度自适应 div高度根据内容自适应 echarts 高度自适应 echarts高度自适应 elementui表格列宽自适应 html input 宽度自适应

一般情况下，就是为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>

这样也能做到内容自适应效果

效果图

weixin_39598584

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 左右排列高度自适应_textarea高度随内容自适应增高撑开

一般情况下，就是为textarea设定为一定的高度的文本框，然后当输入的内容超过设定的高度的时候，就会出现滚动条，这样显示是不太美观的，因此就出现需要textarea随输入文本内容高度自适应的需求。而textarea本身是没有这个功能的，所以我们就需要利用js动态为textarea设置高度。解决方案代码：HTML代码：<textarea id="textarea"></texta...
复制链接

扫一扫