实现高度“听话”的多行文本输入框

一、前言

  通过创建 textarea 标签，并且指定其 rows 和 cols 属性，就可以创建一个多行文本输入框。

  但是当输入的内容超过指定的 rows 之后，就会出现滚动条，如果用户想要查看全部内容，那就必须来回的拖动滚动条。而且这个滚动条只有在用户滚动的时候才会出现，在一些情况下，用户可能并不知道该区域有更多的内容。

  通常情况下，为了给用户一个良好的体验，需要让这个多行文本输入框的高度自适应，从而避免滚动条带来的问题。

二、高度自适应

  实现高度自适应的文本输入框的思路很简单：监听输入相关的事件，获取到元素的内容高度，修改 textarea 的固定高度。

  其中涉及很多基础的知识，也就是我们常说的细节问题处理：

1、scrollHeight

  scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出的视图中不可见的内容。

  scrollHeight 包含元素的 padding，但是不包含元素的 border 和 margin 。当元素中不存在溢出内容，则 scrollHeight 与 clientHeight 是相同的。

  接下来只要将获取到的 scrollHeight 属性值赋给元素样式中的 height 属性，是不是就可以动态的更改高度呢？当然，事情并没有那么简单，这里又要引出另一个基础知识点。

2、box-sizing

  CSS 中的盒模型基本上是常考的一个知识点，CSS 中可以通过设置 box-sizing 属性值，从而更改盒模型高度和宽度的计算，下面以高度为例：

• content-box：是默认值。如果你设置一个元素的高度为100px，意味着元素内容区域的高度为100px，如果再设置 padding 和 border ，那么最终元素的高度为 100px + border-top + border-bottom + padding-top + padding-bottom 。
• border-box：如果你设置一个元素的高度为100px，则意味着元素的最终高度就是100px，而元素内容区域的高度为 100px - border-top - border-bottom - padding-top - padding-bottom 。

  由此可见，为元素设置样式中的 height 属性时，需要弄清楚元素的 box-sizing 、 padding 以及 border。

3、get