＜layui-textarea＞文本高度自适应

古城深巷细雨绵

已于 2022-11-29 15:30:39 修改

阅读量2k

点赞数 4

分类专栏：工作记录

于 2022-11-29 14:08:56 首次发布

本文链接：https://blog.youkuaiyun.com/ww981580010/article/details/128096883

版权

文本框高度自适应 autoHeight JS事件移动端优化

关键词由优快云通过智能技术生成

工作记录专栏收录该内容

7 篇文章

订阅专栏

一、背景：

当文本超过文本框高度时，会出现滚动条，移动端看起来很别扭。改为文本框高度自适应，更符合日常的生活习惯。

二、思路

1、文本添加autoHeight=true属性

2、js:添加文本高度行高随文本添加事件：elem.style.height = elem.scrollHeight + 'px';

三、代码


<html>
<head>
    <title>测试</title>
</head>
<body>

//添加自适应高度属性：autoHeight
//${tylPostMessage.content}:后端传过来的内容
<textarea  autoHeight="true" style='overflow-y:hidden'>${tylPostMessage.content}
</textarea>
</body>
<script>
 $(function(){
            $.fn.autoHeight = function(){
                function autoHeight(elem){
                    elem.style.height = 'auto';
                    elem.scrollTop = 0; //防抖动
                    elem.style.height = elem.scrollHeight + 'px';
                }
                this.each(function(){
                    autoHeight(this);
                    $(this).on('keyup', function(){
                        autoHeight(this);
                    });
                });
            }
            $('textarea[autoHeight]').autoHeight();
        })
</script>
</html>