“自适应”高度的 textarea 文本输入框

写在前面

那啥，在我的那个很安静的一个 CSS 群（群号：82991297）突然看到有人在问一个问题。

使用 css 如何实现：textarea 如何实现高度自适应？

当时看到这个问题的时候，我脑中只有一个想法，这个百度一下就够了，完全不需要用很多技术人员都喜欢用的谷歌来搜索。然而，这里有一个关键点是“使用 CSS 如何实现”。

可以用 CSS 实现？

这是个问题，能搜索到的结果必然都是通过 JS 的方式来实现的，而不会有人提到使用 CSS 来实现的，毕竟用 CSS 真的实现不了啊。CSS 主要是用来排版、修饰页面的，又不是万能的。

思考

是啊，不是万能的 CSS 无法满足这个“自适应”的需求，那么要如何去实现呢。其实吧，对于“自适应”高度的需求一直都是在大家所追求着，最常见比如就是以前偶尔会有人说一个 div 怎么自适应高度什么的。

对于一个 div 自适应高度的话，其实很简单，只要不设定高度就可以了。如果这个 div 元素中有 float 属性，那么就闭合这个 div 元素（清除浮动）就好了；当然啦，如果是用了 position: absolute; 的话，那就不要说自适应高度了。

假设使用非输入元素实现

非输入元素（input 以及 textarea 等以外的元素），我们可以利用 contenteditable 属性来实现，让一个元素变成可以编辑、可输入的元素，那么也就可以实现所谓的自适应高度的输入框了。

<div contenteditable></div>

简单一句话就可以满足了。至于兼容性，直接看 http://caniuse.com/#search=contenteditable 这个网址吧。

• IE ✔

• Edge ✔

• Firefox ✘ 2+ ◒ 3+ ✔ 3.5+

• Chrome ✔

• Safari ✔

• Opera ✔

看起棒棒哒，直接就可以打满分