“自适应”高度的 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 ✔

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

textarea 元素怎么实现

可能会有人追求标签语义化，一定要用 textarea 来实现；也可能会有人说，通过非输入元素增加 contenteditable 虽然可以实现输入，并且也可以自适应高度了，但会不会有性能上的问题，再或者万一不小心又兼容性的问题，毕竟还是有一些浏览器时不支持的啊。

是啊，有时候考虑一些问题，总是会有一些万一的情况出现，对于这样的万一，我们就乖乖用 textarea 文本输入框好了。

那问题回来了，怎么实现 textarea 的自适应高度呢。

其实这个问题也简单，用 JS 就好了，而且现在网络上有太多太多的 JS 代码可以满足了，所以呢，也没啥好说的，百度一下就知道了。

这搜索结果，总有一个是能满足的吧，要是不满意的话，那么就在谷歌上看看咯。

觉得用中文找到的答案不满意，还可以这样啊，用英文单词啊。

反正呢，无论怎么样，找到的结果是非常多的，但是具体怎么筛选还是看各位自己。

尝试自己写

很多人都知道，小志我只是一个会一点 CSS，却不会 JS 的人，所以，我也一直找不到好工作，怪我自己，恩，都是我自己的错。

于是，我想，要不自己尝试一下吧。

<textarea id="ta" rows="1"></textarea>

function $(id) {
  return document.getElementById(id); } $("ta").onkeyup = function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + "px"; }

textarea {
    display: block;
    width: 300px;
    height: 34px;
    overflow: hidden;
    padding: 5px 10px;
    margin: 30px auto 0;
    resize: none;
    line-height: 24px;
    font-size: 16px;
    color: #666;
    border: 1px solid #ccc;
    outline: 0 none;
    box-shadow: 0 0 5px #999;
    border-radius: 3px;
    box-sizing: border-box;
    transition: all 200ms linear;
}

textarea:focus {
    color: #277fe4;
    border-color: #2196f3;
    box-shadow: 0 0 5px #03a9f4;
}

原本我想不要用 keyup 吧，把 change 和 keydown 都放进去，不过想想，直接使用 keyup 似乎也够了，所以就这样了，效果上来说，我自己也满意了。就是不知道兼容性什么的会怎么样?。

不过在这里我真觉得我这段 JS 是很有问题的，这也太简单点了不是么。?

this.style.height = 'auto';

如果没有了这句话，当输入框中的内容减少后，高度就缩不回去了；而有了这句话后，因为 height: auto; 导致 transition 的过渡效果就没有了，整体上就是一抖一抖的，不舒服啊。

哦，还有一个情况，就是在 textarea 标签中，我给了一个 rows="1" 的属性。这个主要是控制 textarea 的行数，如果缺少了这个的话，就会变成这样了。

随便来一下，输入框的高度就变化了，但是这个时候并没有回车到第二行，所以我加了 rows="1"，这样的话就安心了。

最后

感觉这篇又是为了“政治”任务而写的，好久没更新公众号，心里就感觉少了点什么似的。其实有时候想想，写 CSS 方面的东西，有一些新的内容呢，都是草案之类的，浏览器支持都是一个问题，拿出来说也就那么一说；写一些旧的内容呢，其实网络上搜搜一大片，挺矛盾的。

跟朋友聊了之后，他们说，这个公众号你是当自己的博客来用的，那么何必在意那么多，想写点什么就写点什么咯。

想想也是，有一些不想写太多的，就在小密圈里随便写一点吐槽一下，偶尔就在公众号里多废话几句。

马上周末了，周末愉快！