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" }