“自适应”高度的 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>复制代码

简单一句话就能够知足了。至于兼容性，直接看 caniuse.com/#search=con… 这个网址吧。

• 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 方面的东西，有一些新的内容呢，都是草案之类的，浏览器支持都是一个问题，拿出来讲也就那么一说；写一些旧的内容呢，其实网络上搜搜一大片，挺矛盾的。

跟朋友聊了以后，他们说，这个公众号你是当本身的博客来用的，那么何须在乎那么多，想写点什么就写点什么咯。

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

立刻周末了，周末愉快！