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

textarea自适应的实现方法不少，原理其实比较简单：监听textarea的input或者键盘事件，获取元素的scrollHeight,重置textarea元素的高度。

预览地址：textarea

咱们知道textarea有个rows的属性，改变rows的值能够改变textarea的高度，至于怎么改变不作探究, 因此思路就来了：当文本输入的时候，动态给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设置padding的话，须要减去上下padding的值，代码中也有体现。

有问题欢迎交流，最后附上源码。

查看源码：源码