编写自适应高度的 textarea

CarterLi

文本框是很常见的输入控件,我相信只要写过表单的肯定接触过 textarea 这个元素。

OK。但是现在产品经理说了:需要这个文本框可以根据用户输入内容自适应其高度。

height: auto

有些初学者可能会想:自适应高度不就是 height: auto 么?可是你想一下,一个 textarea 没有手工给它指定过样式,不应该就默认是 height: auto 么?但是它还是有自己的初始高度,并没有像一个 div 那样高度为 0。

div 不同,textarea 的默认高度不是根据其内容自适应,而是由属性 rows 指定,其默认值是 2rows 这个属性(Attribute)只接受正整数,指定其他值浏览器会忽略掉其值,比如你写 rows="auto" 那么 rows 就是 2,rows="0" 也是 2。

clipboard.png

所以指定 height: auto 是行不通的,height 属性必须人工指定其值。

scrollHeight

遇到过这个问题的同学(比如当初的笔者),肯定想到过 scrollHeight 这个 DOM 属性。想法很简单,当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛,那么自然而然就能想到 scrollHeight 这个属性。scrollHeight 就应该是用户输入文本的真实高度,至少超过文本框既定高度时是这样。

那么问题来了:如果没超过呢?

OK 我知道你会先指定 rows="1" 让文本框默认高度只有一行。但是考虑这种情况:用户先输入了很多行文本

clipboard.png

然后删除了一段:

clipboard.png

scrollHeight 值没有变化。MDN 上说了:

没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同

scrollHeight 确实会随着用户输入内容多少而增减,但是仅限于出现滚动条的情况,对于题设这个情况必然不适用,因为需求就是不能出现滚动条(严格来说是超出可视区域)。你可以在获取 scrollHeight 的值之前先把文本框高度设为 0 强制让滚动条出现,但是这样可能使页面发生闪烁,而且性能也低。

split('\n')

DOM 属性靠不住,那我自己算文本高度不行吗?说我拿出所有文本,按换行符拆分,看有多少行,行数 * 行高 不就是最终文本高度吗?

额。。。当文本没有折行的情况下是这样。。。

contenteditable

contenteditable 确实是一个(相对)可行的方案,但是作为一个踩过坑的先行者劝解你:不到万不得已,contenteditable 不要碰。这个玩意各个浏览器实现都不一样,各种奇葩行为,光一个换行符就足够折磨你半天。

当然这里还没有到那么复杂的地步,但是你得先会把“复制——粘贴”过去的样式去掉才行

这段话是直接从MDN上复制的,contenteditable会贴心的把样式也给你放进去

笔者的方法

说了那么多废话,那么究竟该怎么办呢?这里笔者提供一种方法。

当然首先声明:笔者的方法未必是最简单的,如有其它更简单的方案欢迎留言提出。

我们想一下,textarea 不能按照内容自适应高度,div 可以啊,能不能先把文本填到一个 div 里,div 的高度就应该是文本框所需高度(当 paddingline-height 等样式都一致的情况下),这时获取 div 的高度赋值给文本框高度不就行了吗。

就是这样的思路。我们也不需要专门使用 JS 获取,只要让 div 把父元素撑起来,绝对定位 textarea 元素让文本框占满整个父元素大小就好了。

直接上代码:

<style>
  #parent {
    width: 500px;
    font: 12px monospace;
    position: relative;
  }
  #dummy {
    padding: 2px;
    border: 1px solid;
    visibility: hidden;
  }
  #dummy::after {
    content: "\A";
  }
  #textarea {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    resize: none;
    width: 100%;
    font: inherit;
  }
</style>
<div id="parent">
  <div id="dummy"></div>
  <textarea id="textarea"
            oninput="document.getElementById('dummy').textContent = this.value"></textarea>
</div>

这里查看运行结果:https://codepen.io/CarterLi/p...

三个要点:

  1. 字体相关样式 #dummytextarea 两元素必须完全一致,差一点就可能出现两者高度对不上的情况。
  2. #dummywhite-space: pre-wrap 醒目。否则会出现 HTML 中吞空格、换行符的情况。
  3. 就算有了 white-space: pre-wrap,HTML 仍然会吞掉最后的换行符。解决方案是在 #dummy 最后插入一个换行符元素。可以是 <br />,也可以是一个伪元素。伪元素中换行符的写法是 \A(即换行符的 ASCII 码 10 的十六进制表示。不能写 \n

代码中是用 JS 给 #dummy 赋值。项目中如果你用 vuejsangular 等 MVVM 框架,直接把文本框的值绑定到 div 上就好,非常方便。

如果你要限制文本框的最大最小高度,在 #dummy 上直接设置 min-height max-height 即可。

最后说一句:把 textarea 盖到一个 div 上的做法还可以简单的实现文本框的语法高亮,读者可以想想怎么做。

阅读 3.6k

我大EOI前端
[链接] 虽然公司尚小,但是志向不小
1.3k 声望
99 粉丝
0 条评论
1.3k 声望
99 粉丝
文章目录
宣传栏