如何使textarea高度自适应

发表于2019-01-10

在开发中，开发者可能需要开发一个能自动增加高度，并且最大高度为两行，超出两行能上下滚动的输入框。输入框我们一般会想到单行的input和多行的textarea。input是单行的，不能用于多行的文本输入，所以选用textarea。但是textarea的高度默认是不随着内容的变化而变化，内容多的话，会出现滚动条。所以如果要实现想要的效果，必须得让textarea高度自适应。

要实现这种效果，本人起先尝试了通过将textarea的高度赋值为其本身的scrollHeight的方式。

如下所示：

1
2
<!-- 用户输入框 -->
<textarea id="message-textarea"></textarea>
1
2
3
4
5
6
7
8
9
#message-textarea{
  width: 200px;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
  height: 30px;
  box-sizing: border-box;
  overflow: hidden;
}
1
2
3
4
5
var areas = document.getElementById('message-textarea');

areas.addEventListener('input', function() {
    this.style.height = this.scrollHeight+'px'; 
}, false);

监听输入框修改的事件选用input事件，在用户输入、退格（backspace）、删除（delete）、剪切（ctrl + x）、粘贴（ctrl + v）及鼠标剪切与粘贴时都会触发。由于大多数项目对于IE的支持大多选用了IE10+，所以这里不考虑低版本浏览器的兼容性问题。

运行这个页面，在内容高度增加后，输入框的高度随着内容高度的增加而增加，比较顺畅。但是当删除内容后,输入框的高度不会随着内容高度的减少而及时变小。尤其是当内容大块删除或者剪切后，高度没有变化，这个不是我们想要的。为了使高度能随内容变小，我们需要借助一个能自动改变高度的第三方元素，将textarea中的内容及时复制一份到该元素中，然后将监听事件中高度改为第三方元素的高度。本人选用了pre，因为其对文本的格式支持度非常好。如果选用div、p等元素，textarea里的换行在这些元素里会被忽略。

所以经过一番修改优化，textarea高度自适应得以实现。代码如下：

1
2
3
4
5
<!-- 用户输入框 -->
<div id="message-textarea">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>
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
#message-textarea{
  width: 200px;
  max-height: 50px;
  outline: 1px solid #000;
  position: relative;
  line-height: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#message-textarea pre{
  padding: 5px;
  margin: 0;
  font: 400 14px/20px helvetica, arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  visibility: hidden;
}

#message-textarea textarea{
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  font: 400 14px/20px helvetica, arial, sans-serif;
  padding: 5px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  resize: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
function makeExpandingArea(container) {
  var textarea = container.getElementsByTagName('textarea')[0] ;
  var span = container.getElementsByTagName('span')[0] ;

  textarea.addEventListener('input', function() {
    span.textContent = textarea.value;
  }, false);

  span.textContent = textarea.value;
}

var areas = document.getElementById('message-textarea') ;
makeExpandingArea(areas);

注意： 这里的textarea需要禁止掉可手动拉伸的特性，也就是右下角出现的小三角形。解决这个问题很简单，只要在css里设置“resize:none;” 即可。

示例地址