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

Posted 2022-10-14 blogs-wang

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

pc   移动端都经过测试，没问题 放心用吧！

directiveApp.directive(‘autoHeight‘, function()       function autoHeight(elem)           elem.style.height = ‘auto‘;           elem.scrollTop = 0; //防抖动           elem.style.height = elem.scrollHeight + ‘px‘;                return            scope: ,           link: function (scope, ele, attrs)               var oriEle = $(ele).get(0);               $(oriEle).focus();               $(oriEle).bind(‘keyup click‘, function(e)                   autoHeight($(this).get(0));               );               var timer = setInterval(function()                   if($(oriEle).val())                       autoHeight(oriEle);                       clearInterval(timer);                                  , 100);                  ;   );<br>

 

1 2	html code: 　　<textarea auto-height></textarea>

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

js版本

1.引入Jquery.

 

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

 

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

<div><textarea autoHeight="true">textarea</textarea></div>

 

1.引入Jquery.

 

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

 

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

<div><textarea autoHeight="true">textarea</textarea></div>

 

$(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直接加属性就行

<textarea  autoHeight="true" readonly="readonly" > </textarea>