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

.textarea{box-尺寸：边框框；最小高度：136px；最大高度：300px；左边距：自动；右边距：自动；填充：3px；大纲：0；边框：1px实心#a0b3d6；;word-wrap:break-word;溢出-x：隐藏；溢出-y：自动；_overflow-y：可见；-webkit-user-modify:read-write-plaintext-only;//只是编辑text文本，只能解决webkit内核中的问题，适合手机端-webkit-user-select:text;//解决部分IOS手机不支持contenteditable=true属性的问题p{margin:0;}}使用contenteditable+div模拟textarea文本域实现高度自适应使用textarea和auto-size插件实现textarea高度自适应。后来因为一些问题，依赖比较多，缺乏定制化，所以决定使用contenteditable来实现。contenteditable简介contenteditable属性指定元素的内容是否可以编辑。是H5的新属性，支持的还是不错的。基本上，所有浏览器都兼容。语法：主要代码实现以下代码是基于Vue实现的。html部分：CSS部分.textarea{box-尺寸：边框框；最小高度：136px；最大高度：300px；左边距：自动；右边距：自动；填充：3px；大纲：0；边框：1px实心#a0b3d6；;word-wrap:break-word;溢出-x：隐藏；溢出-y：自动；_overflow-y：可见；-webkit-user-modify:read-write-plaintext-only;//只是编辑text文本，只能解决webkit内核中的问题，适合手机端-webkit-user-select:text;//解决部分IOS手机不支持contenteditable=true属性的问题p{margin:0;}}代码解读：set-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元素只输入纯文本