简单实现一个textarea自适应高度

88次阅读

共计 965 个字符,预计需要花费 3 分钟才能阅读完成。

textarea 自适应的实现方法很多,原理其实比较简单:监听 textarea 的 input 或者键盘事件,获取元素的 scrollHeight, 重置 textarea 元素的高度。
预览地址:textarea
我们知道 textarea 有个 rows 的属性,改变 rows 的值可以改变 textarea 的高度,至于怎么改变不做探究,反正就是自带富察氏贵族血统 (hhhhhh), 所以思路就来了:当文本输入的时候,动态给 textarea 赋值 rows, rows 自会导致 textarea 的高度改变
接下来,问题就来了,如何动态获取 rows 的值?首先我们先看一下 textarea 与 rows, cols 以及浏览器的的关系是怎样的?可以参考张大神的文章 HTML textarea cols,rows 属性和宽度高度关系研究
猜测你已经看完了,大概得出一个结论就是:textarea 高度 ≈ lineHeight * rows. 这样思路就更清晰了。看代码
resizeHeight(elem, style) {
elem.removeAttribute(‘rows’)
elem.style.height = ‘auto’
const {scrollHeight} = elem
const {lineHeight, paddingTop, paddingBottom} = style
let rowsNum = Math.round((scrollHeight – paddingTop – paddingBottom) / lineHeight)
elem.setAttribute(‘rows’, rowsNum)
},
原理很简单,获取到元素的 scrollHeight(即元素真实高度), 与元素的行高求商,四舍五入。有同学说,直接把 scrollHeight 赋值给元素不就行了,这么麻烦,说的好有道理。是不是这样
const {scrollHeight} = elem
elem.style.height = `${scrollHeight}px`
貌似好像也行呀,pc 站好像没问题,不过笔者在移动端测试的时候删除的时候,貌似有点小问题。换成改成获取 rows 的方法就好了,毕竟血统在那里摆着,textarea 也得给点面子。
如果 textarea 设置 padding 的话,需要减去上下 padding 的值,代码中也有体现。
有问题欢迎交流,最后附上源码。
查看源码:源码

正文完
 0