一、前言
通过创建 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。