用div模拟文本域实现高度自动撑开以及相关问题的解决方法

前段时间项目里面用到了一个高度随着内容自动撑开的文本域效果，这一点传统的textarea标签是满足不了的，而我们要做的只是在div中加一个contenteditable="true"的属性，以下是现实效果。

但是接下来就遇到了问题，当你在模拟的文本域中复制内容再粘贴到相同类型的文本域里面时问题就出现了

没错，你复制的内容在接下来粘贴时会带有html标签和对应的样式内容，这可不是我们想要的效果。说实话，解决这问题还是花了点时间，找了很久才找到最合适的办法。方法就是给这个div加上:

"user-modify:read-write-plaintext-only;

-webkit-user-modify:read-write-plaintext-only;"

的样式，这个内容的意思就是指定这个div不管是读取（复制）还是写入都只允许纯文本内容。ok！这样就万事大吉啦？

其实并没有。。。

当你给div加上上述样式后会发现即使把contenteditable的值改为false后他的内容依然是可更改和输入的。这个问题我的做法是动态更改样式，当需要div可输入时加入上述样式，不需要时就删除，因为项目是基于vue这样的数据驱动页面的框架，因此实施起来其实并不麻烦，但是如果不用这样的框架可能就会比较痛苦了。

用div模拟文本域实现高度自动撑开以及相关问题的解决方法相关推荐

关于模拟文本域iview textarea文本域:autosize=quot;{minRows: 3,maxRows: 7}quot;这个属性的好处
具体写法:<Input v-model="value" type="textarea" :autosize="{minRows: 3,maxRo ...
Visual Assist x 无法自动补全Snippet提示的解决方法
Visual Assist x 无法自动补全Snippet提示的解决方法参考文章: (1)Visual Assist x 无法自动补全Snippet提示的解决方法 (2)https://www.cn ...
UE4笔记-UStructToJsonObjectString首字母自动转换为小写的问题及解决方法
UE4笔记-UStructToJsonObjectString首字母自动转换为小写的问题及解决方法参考文章: (1)UE4笔记-UStructToJsonObjectString首字母自动转换为小写 ...
叮咚同城小程序问题：点击发布信息按钮自动闪退到首页的解决方法
叮咚同城小程序问题:点击发布信息按钮自动闪退到首页的解决方法是因为没有登录,授权登录后,该问题就解决了
草图大师卡死后找到自动保存备份文件的3种解决方法
草图大师卡死后怎么找到自动保存备份文件?在我们遇到Sketchup软件死机或者意外关闭的时候,可以通过找到自动保存的备份文件,来进行处理数据的修复.本期,就和模型云一起看看当草图大师SU软件卡住死机后 ...
打印机自动打印之前的页面的解决方法
现象:电脑重新启动后,打印机自动打印之前的页面. 解决方法如下:(仅供参考) 1. 单击电脑左下角"开始"→"打印机和传真".在"打印机和传真&quo ...
Eclipse不自动编译java文件的终极解决方法
Eclipse不自动编译java文件的终极解决方法投稿:mdxy-dxy 字体:[增加减小] 类型:转载时间:2015-12-13 我要评论这篇文章主要介绍了Eclipse不自动编译java文 ...
wangEditor富文本编辑器addRange(): The given range isn‘t in document解决方法
在使用wangEditor富文本编辑器的时候发现第一次创建富文本编辑器可以正常显示出来 ,而第二次打开后就变成了一片空白,看了一下控制台报错显示: addRange(): The given rang ...
Mac电脑待机长时间离开后自动退出登录和关机的解决方法
很多朋友都有这样的疑问?在使用Mac电脑的过程中:长时间离开电脑后回来后,会发现Mac退出了登录,然后程序都被关闭,好像是自动重启电脑了.有时会怀疑是不是被入侵操控了.. 经过查询才发现,原来这是Ma ...

用div模拟文本域实现高度自动撑开以及相关问题的解决方法

用div模拟文本域实现高度自动撑开以及相关问题的解决方法相关推荐

最新文章

热门文章