I am Oliver

Textarea 的高度自动增长

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

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

那就方便了:

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$('.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;
    }
  }
});

这是一个例子~ (换行试试~😏)

打赏