textarea 自适应高度，js和angular两个版本

angular 版本----------

pc   移动端都经过测试，没问题 放心用吧！有粘贴无效的问题，因为内部调用的jquery实现，可以加一个 input.

-------------------------------------------------------------------------------------------------------------------------------

js版本

1.引入Jquery.

2.引入初始css.

body { background:#fff; }

textarea {width:300px; min-height:60px; overflow:hidden;}

3.加入自适应的JS

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

4.加入textarea

textarea

1.引入Jquery.

2.引入初始css.

body { background:#fff; }

textarea {width:300px; min-height:60px; overflow:hidden;}

3.加入自适应的JS

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

4.加入textarea

textarea

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

页面中的textarea直接加属性就行

转载于:https://www.cnblogs.com/Blogs-Wang/p/11462658.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！