textarea 自適應高度，js和angular兩個版本

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

pc   移動端都通過測試，沒問題 放心用吧！有粘貼無效的問題，由於內部調用的jquery實現，能夠加一個 input.

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 input' ,  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>