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

lanffy 发布于2019-08-23 11:39 / 2470人阅读

摘要：自适应的实现方法很多，原理其实比较简单监听的或者键盘事件，获取元素的重置元素的高度。看代码原理很简单，获取到元素的即元素真实高度与元素的行高求商，四舍五入。如果设置的话，需要减去上下的值，代码中也有体现。有问题欢迎交流，最后附上源码。

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

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

查看源码：源码

云服务器 GPU云服务器 textarea自适应高度高度自适应 iframe高度自适应 iframe自适应高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97272.html

编写自适应高度的 textarea

摘要：但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单，当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛，那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度，至少超过文本框既定高度时是这样。文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适...

only_do 2019-08-23 15:27 评论0 收藏0
编写自适应高度的 textarea

摘要：但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单，当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛，那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度，至少超过文本框既定高度时是这样。文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适...

wenzi 2019-08-02 14:19 评论0 收藏0
使用contenteditable+div模拟textarea文本域实现高度自适应

摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本使用contenteditable+div模拟textarea文本域实现高度自适应开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size...

seasonley 2019-08-01 17:53 评论0 收藏0
使用contenteditable+div模拟textarea文本域实现高度自适应

摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本使用contenteditable+div模拟textarea文本域实现高度自适应开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size...

Olivia 2019-08-29 13:42 评论0 收藏0