如何实现 textarea 的高度自适应功能

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197378.html

今天项目需求需要实现一个回复评论的页面，设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好，这个功能还比较常见，用来获取文本的长宽（避免了计算不准的问题），主要用于实现 textarea 自动变长。

可以看到在我们使用 textarea 的时候，有时候需要感知内容的高度，然后动态撑开。（elementUI 的 textarea 就提供了 autosize 的功能。）

那我们也想实现这样的功能应该怎么办呢？

1. 获取内容，然后统计字符个数估算。中文算两个，英文算一个。但是还是有问题的，比如说非等宽字体。
2. 聪明的读者已经看到了我们中间的 div 效果，就是我们想要的高度。也是 elementUI 的方案，创建一个拥有相同样式的 div，然后获取他的高度。

构建相同样式的 DOM

看上去这个方案是最妙的。那么如何构建相同的 DOM 呢？

1. 既然要构建相同的 DOM，那么我们需要知道 DOM 长什么样子。
   那么如何获取样式呢？获取 class？获取 style？
   nonono，我们要用 window.getComputedStyle(el)，然后就可以快乐的拿到计算后的属性。
2. 之后我们需要知道什么属性会影响字体排列。
   CONTEXT_STYLE = [ 'letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing']
3. 因为我们需要重新搞一个 DOM 节点，而且我们不希望这个过程被用户看到，所以我们要隐藏起来。有什么方案呢？
   • display:none 这个是不行的，因为 none 之后不会绘制了。也就获取不到宽高了。
   • opacity:0 这个可以
   • visibility: hidden; 这个也可以
   • height:0;overflow:hidden 这个也可以，获取 scrollHeight
   • z-index:-999 这也可以的。
   • position:absolute;top:-9999px;left:-9999px 也是可以的

elementUI 实现

点击这里

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/