jQuery 实现文本框 textarea 自适应高度

<body>
    <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"></textarea>
</body>

$(function() {
  // 1. 默认配置：无特殊限制
  $("#textarea1").textareaAutoHeight();
  
  // 2. 仅限制最大高度为 100px
  $("#textarea2").textareaAutoHeight({maxHeight: 100});
  
  // 3. 限制最小高度 50px，最大高度 200px
  $("#textarea3").textareaAutoHeight({minHeight: 50, maxHeight: 200});
});

$.fn.extend({
  textareaAutoHeight: function(options) {
    this._options = {
      minHeight: 0,
      maxHeight: 1000
    };

    // 合并用户传入的参数
    this.init = function() {
      for (var p in options) {
        this._options[p] = options[p];
      }
      
      // 若未指定最小高度，则取当前实际高度作为初始值
      if (this._options.minHeight == 0) {
        this._options.minHeight = parseFloat($(this).height());
      }
      
      // 将配置属性写入 DOM 元素的 attribute 中，方便后续读取
      for (var p in this._options) {
        if ($(this).attr(p) == null) {
          $(this).attr(p, this._options[p]);
        }
      }
      
      // 绑定事件：输入、内容改变、获取焦点时触发重置高度
      $(this).keyup(this.resetHeight)
             .change(this.resetHeight)
             .focus(this.resetHeight);
    };

    // 核心算法：计算新高度并应用
    this.resetHeight = function() {
      var _minHeight = parseFloat($(this).attr("minHeight"));
      var _maxHeight = parseFloat($(this).attr("maxHeight"));

      // IE 浏览器兼容性处理：某些版本需要先重置高度
      if (!$.browser.msie) {
        $(this).height(0);
      }
      
      // 获取内容的自然滚动高度
      var h = parseFloat(this.scrollHeight);
      
      // 边界判断：clamp 函数逻辑
      // 如果 h 小于最小值，取最小值；大于最大值，取最大值；否则取 h
      h = h < _minHeight ? _minHeight : h > _maxHeight ? _maxHeight : h;
      
      // 应用高度并修正滚动位置
      $(this).height(h).scrollTop(h);
      
      // 超过最大高度时显示垂直滚动条，否则隐藏
      if (h >= _maxHeight) {
        $(this).css("overflow-y", "scroll");
      } else {
        $(this).css("overflow-y", "hidden");
      }
    };
    
    // 执行初始化
    this.init();
  }
});