有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

textarea高度自动撑开(自适应高度的textarea文本框)

代码编程 炮渣日记 3周前 (11-19) 27次浏览 已收录 0个评论 扫描二维码
textarea高度自动撑开(自适应高度的textarea文本框)

需求来源

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

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

搬你想搬,盖你所需,码字不易,且行且珍惜!

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址