“自适应”高度的 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 方面的东西,有一些新的内容呢,都是草案之类的,浏览器支持都是一个问题,拿出来说也就那么一说;写一些旧的内容呢,其实网络上搜搜一大片,挺矛盾的。
跟朋友聊了之后,他们说,这个公众号你是当自己的博客来用的,那么何必在意那么多,想写点什么就写点什么咯。
想想也是,有一些不想写太多的,就在小密圈里随便写一点吐槽一下,偶尔就在公众号里多废话几句。
马上周末了,周末愉快!