textarea 高度随内容变化而变化

1. 通过扩展jQuery　　　　　　

html代码

  <div style="width: 300px;height: 500px; border: 1px solid red;overflow: scroll;">
    <div id="scoll" class="scroll">
      <div style="width: 300;height: 600px;background-color: greenyellow;"></div>
    </div>
  </div>
</div>

　JS 代码

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

 

二、直接添加指定元素

<div>
  <textarea name="" id="" rows="1" oninput="areaChange(this)" style="height: 32px;"></textarea>
</div>

　　

  function areaChange(_this) {
    _this.style.height = 'auto';
    _this.scrollTop = 0; //防抖动
    _this.style.height = _this.scrollHeight + "px"

  }