zoukankan html css js c++ java

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>

Html code:
　　<textarea auto-height></textarea>

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

js版本

1.引入Jquery.

2.引入初始css.

body { background:#fff; }

textarea {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>