Textarea 的高度自动增长

2017-01-20 Oliver Wang 更多博文 » 博客 » GitHub »

原文链接 http://ochukai.me/textarea-height-auto-increase/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

一般情况下，textarea 的高度是定死的，rows 指定了之后，高度就不变了，内容多了之后会出现滚动条，这样的设定在大部分的场景下面是够用的，但是有时就会很丑陋（废话😊）。

我们都知道 HTML 的元素都有一个 scrollHeight 这个属性，就是当该元素出现滚动条的时候，内容的高度。

那就方便了：

$(".weui-textarea").on('input propertychange keyup',function () {
  $(this).height(this.scrollHeight);
});

这样就实现了高度自动增加的 Textarea，但当我试着删掉几行，想让它自动降低高度的时候不禁菊花一紧，他不动~

这就尴尬,,ԾㅂԾ,,了，于是我就找了另外一种方法:

$('.weui-textarea').on('input keyup', function () {
  // 尝试滚动一段距离，如果没有滚动条，scrollTop 还是 0
  if (this.scrollTop == 0) {
    this.scrollTop = 1;
  }

  while (this.scrollTop == 0) {
    if (this.rows > minRows) {
      this.rows--;
    } else {
      break;
    }

    this.scrollTop = 1;
    if (this.rows < maxRows) {
      this.style.overflowY = "hidden";
    }

    if (this.scrollTop > 0) {
      this.rows++;
      break;
    }
  }

  while (this.scrollTop > 0) {
    if (this.rows < maxRows) {
      this.rows++;
      if (this.scrollTop == 0) {
        this.scrollTop = 1;
      }
    } else {
      this.style.overflowY = "auto";
      break;
    }
  }
});

这是一个例子~ （换行试试~😏）

$(function () {

var minRows = 3;
var maxRows = 10;

$('.weui-textarea').on('input keyup', function () {
  // 尝试滚动一段距离，如果没有滚动条，scrollTop 还是 0
  if (this.scrollTop == 0) {
    this.scrollTop = 1;
  }

  while (this.scrollTop == 0) {
    if (this.rows > minRows) {
      this.rows--;
    } else {
      break;
    }

    this.scrollTop = 1;
    if (this.rows < maxRows) {
      this.style.overflowY = "hidden";
    }

    if (this.scrollTop > 0) {
      this.rows++;
      break;
    }
  }

  while (this.scrollTop > 0) {
    if (this.rows < maxRows) {
      this.rows++;
      if (this.scrollTop == 0) {
        this.scrollTop = 1;
      }
    } else {
      this.style.overflowY = "auto";
      break;
    }
  }
});

});