简朴完成一个textarea自适应高度

2023年2月7日 216次阅读 来源: 而立

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的值，代码中也有表现。

有题目迎接交换，末了附上源码。

检察源码：源码

    原文作者：而立
    原文地址: https://segmentfault.com/a/1190000016234169
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞