如何实现 textarea 的高度自适应功能
今天项目需求需要实现一个回复评论的页面,设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好,这个功能还比较常见,用来获取文本的长宽(避免了计算不准的问题),主要用于实现 textarea 自动变长。
可以看到在我们使用 textarea 的时候,有时候需要感知内容的高度,然后动态撑开。(elementUI 的 textarea 就提供了 autosize 的功能。)
那我们也想实现这样的功能应该怎么办呢?
- 获取内容,然后统计字符个数估算。中文算两个,英文算一个。但是还是有问题的,比如说非等宽字体。
- 聪明的读者已经看到了我们中间的 div 效果,就是我们想要的高度。也是 elementUI 的方案,创建一个拥有相同样式的 div,然后获取他的高度。
构建相同样式的 DOM
看上去这个方案是最妙的。那么如何构建相同的 DOM 呢?
- 既然要构建相同的 DOM,那么我们需要知道 DOM 长什么样子。
那么如何获取样式呢?获取 class?获取 style?
nonono,我们要用window.getComputedStyle(el)
,然后就可以快乐的拿到计算后的属性。 - 之后我们需要知道什么属性会影响字体排列。
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']
- 因为我们需要重新搞一个 DOM 节点,而且我们不希望这个过程被用户看到,所以我们要隐藏起来。有什么方案呢?
display:none
这个是不行的,因为 none 之后不会绘制了。也就获取不到宽高了。opacity:0
这个可以visibility: hidden;
这个也可以height:0;overflow:hidden
这个也可以,获取 scrollHeightz-index:-999
这也可以的。position:absolute;top:-9999px;left:-9999px
也是可以的
elementUI 实现
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何实现 textarea 的高度自适应功能
码云笔记 » 如何实现 textarea 的高度自适应功能