最近在做微信端的一个应用时,有一个textarea控件,由于不能限定内容的长度,又不想定一个高度随内容的增加而出现滚动条。所以理想状态是随着输入内容的长度的增加,当内容换行时,textarea控件的高度自动增加,下面是实现的js代码:

js代码控制textarea高度随内容自适应-爱 • 范儿 js代码控制textarea高度随内容自适应-爱 • 范儿
<div class="weui-cells__title">公司介绍 <span class="pic-size">建议字数200以内</span></div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" name="introduction" placeholder="请输入公司简介"><?=$introduction?></textarea>
            </div>
        </div>
    </div>
</div>

 

jQuery.fn.extend({
        autoHeight: function(){
            return this.each(function(){
                var $this = jQuery(this);
                if( !$this.attr('_initAdjustHeight') ){
                    $this.attr('_initAdjustHeight', $this.outerHeight());
                }
                _adjustH(this).on('input', function(){
                    _adjustH(this);
                });
            });
           
            function _adjustH(elem){
                var $obj = jQuery(elem);
                return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})
                        .height( elem.scrollHeight );
            }
        }
    });
    $(function(){
        $('.weui-textarea').autoHeight();
    });

 

js代码控制textarea高度随内容自适应-爱 • 范儿js代码控制textarea高度随内容自适应-爱 • 范儿