textarea 高度随内容变化而变化_JavaScript教程

导读：textarea 高度随内容变化而变化

一.、通过扩展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"

  }

全站搜索

textarea 高度随内容变化而变化

最新推荐

本周排行