swing获取文本框内容_自适应高度的textarea文本框

题记:

        ------学到很多东西的诀窍,就是一下子不要去学那么多。

T自适应高度的textarea d8ed6c4baaee54868b2535d250b70a90.png

01917438b55504bbefa152cb5276b0b3.gif

1需求来源

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

2Html源码

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

<h3>自适应高度的textarea文本框h3><textarea autoHeight="true">textarea>
3js源码

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

往期文章推荐

laragon快速搭建本地开发环境

推荐一款超好用Markdown编辑器-typora

上半年的惊险与机遇,我们需要从0到1再到100

天码星空 微信号:tmxk0118 分享是一种美德、关注是一种智慧  更多精彩内容,请↙↙↙点击“
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页