最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

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

如何实现 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 实现

点击这里

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何实现 textarea 的高度自适应功能

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发