自适应高度的textarea文本框文本框自适应文字调整

zhezhongyun 2024-12-25 16:47 54 浏览

需求来源

在文本框输入过多内容时，会出现滚动条，不美观也不舒适；又或者当文本框填充很多内容时，在删除部分内容，高度不会变化，看着好不雅观。这时候，就需要做一个会自适应高度的文本框，根据内容来变化文本框高度。

html源码

给每个textarea文本框加一个autoHeight属性，并设置其属性为true，以便于初始js时获取需要自适应高度的标签

<h3>自适应高度的textarea文本框</h3>
<textarea autoHeight="true"></textarea>

js源码

编写js代码，获取autoHeight属性为true的textarea标签，然后根据keyup事件，每次书写完毕，获取文本框内容高度来设置文本框的高度，如下：

$(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();
})

搬你想搬，盖你所需，码字不易，且行且珍惜！

HTML文本框样式

上一篇：CSS基础-边框和圆角 css中边框圆角
下一篇：零基础教你学前端——28，文字框与密码框

自适应高度的textarea文本框文本框自适应文字调整

需求来源

html源码

js源码

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

自适应高度的textarea文本框 文本框自适应文字调整

需求来源

html源码

js源码

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

自适应高度的textarea文本框文本框自适应文字调整