使用contenteditable+div模拟textarea文本域实现高度自适应

Olivia 发布于2019-08-29 13:42 / 2320人阅读

摘要：使用该组件注意一个问题就是不要在可视化区域的节点上使用样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况地址项目地址参考链接模拟文本域轻松实现高度自适应如何让元素只能输入纯文本

使用contenteditable+div模拟textarea文本域实现高度自适应

开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域，一开始是使用textarea并搭配auto-size插件来做到textarea的高度自适应，后来因为遇到一些问题，而且也多加了依赖缺乏可定制，所以决定使用contenteditable来实现。

contenteditable介绍

contenteditable属性规定元素内容是否可编辑，是H5新增的属性，支持情况相当好，基本上所有的浏览器都兼容。

语法：

实现主要代码如下

代码实现是基于vue来实现的。
html部分：

CSS部分

代码解读：

设置-webkit-user-modify属性，是为了在剪切复制的时候会把剪切的内容的格式也一并带过来，由于我们是仿写textarea，是不支持富文本的，所以需要需要将内容格式化成文本格式，而该属性在webkit内核下就可以达到我们的目的。

设置-webkit-user-select属性，是为了解决在测试过程中出现部分IOS手机不支持contenteditable属性的问题。

JS部分：

代码解读：

其中addEventPaste方法是为了解决非webkit内核对于-webkit-user-select属性支持不好的问题。里面主要是监听黏贴事件然后或者剪切板的文本内容然后再阻止黏贴事件，并将文本内容追加到光标中，并将光标移动到相应的位置。

其中replaceToBreak方法是为了解决在textarea中换行的问题，在该伪textarea中换行是会多带带将换行内容放到新的DIV中的，所以，当我们需要对该内容进行格式化处理才行。

this.$el.scrollIntoView的作用是为了当使用者将我们的输入框是使用绝对定位放在页面底部的时候而被虚拟键盘遮挡的问题。

issue

使用该组件注意一个问题就是不要在可视化区域的节点上使用-webkit-user-select: none样式，否则会出现当鼠标焦点小时光标和小水滴无法消失的情况

github地址

github项目地址

参考链接

div模拟textarea文本域轻松实现高度自适应
如何让contenteditable元素只能输入纯文本

服务器托管私有云 textarea自适应高度高度自适应 iframe高度自适应 iframe自适应高度

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

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

使用contenteditable+div模拟textarea文本域实现高度自适应

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

seasonley 2019-08-01 17:53 评论0 收藏0
textarea文域高度自适应

摘要：高度自适应文本域高度随内容自动变化，不会出现滚动条，可以有多种方法，除了用动态设置它的高度值以外还有其它更简单的方法。还有一种方法，利用兄弟节点撑开父级高度，设置高度为即可。 textarea高度自适应文本域高度随内容自动变化，不会出现滚动条，可以有多种方法，除了用js动态设置它的高度值以外还有其它更简单的方法。可以用div标签模拟textarea，将div的contentedit...

hzx 2019-08-26 11:52 评论0 收藏0
textarea文域高度自适应

摘要：高度自适应文本域高度随内容自动变化，不会出现滚动条，可以有多种方法，除了用动态设置它的高度值以外还有其它更简单的方法。还有一种方法，利用兄弟节点撑开父级高度，设置高度为即可。 textarea高度自适应文本域高度随内容自动变化，不会出现滚动条，可以有多种方法，除了用js动态设置它的高度值以外还有其它更简单的方法。可以用div标签模拟textarea，将div的contentedit...

Dr_Noooo 2019-08-05 13:44 评论0 收藏0
HTML contenteditable属性

摘要：前言之前一直没有留意到有这个属性，今天突然看到特意记录一下它的用法和实际用途用法为了某个使元素可编辑，你所要做的就是在标签上设置属性，它几乎支持所有的元素。前言之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的用法和实际用途；用法为了某个使元素可编辑，你所要做的就是在html标签上设置contenteditable属性，它几乎支持所...

huayeluoliuhen 2019-08-02 16:18 评论0 收藏0
HTML contenteditable属性

摘要：前言之前一直没有留意到有这个属性，今天突然看到特意记录一下它的用法和实际用途用法为了某个使元素可编辑，你所要做的就是在标签上设置属性，它几乎支持所有的元素。前言之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的用法和实际用途；用法为了某个使元素可编辑，你所要做的就是在html标签上设置contenteditable属性，它几乎支持所...

jimhs 2019-08-30 10:56 评论0 收藏0