IE页面表单内容无法选中复制问题

IE页面表单input框,无法选中复制问题

IE页面表单textarea框,无法选中复制问题


 前言:

一定要记住的,开发中的坑:

不知道的属性,别乱写!!! 不知道的代码,别乱抄!!! 

问题场景:

  项目中,用的IE 11浏览器,结果出现 textarea框 内容无法选中复制问题。其他表单框都没有此状况。因此,很郁闷和不解。

解决思路:

1、因为本地的谷歌浏览器并没有问题,因此觉得是IE浏览器的问题,随即百度查看,IE浏览器是否有特殊限制,结果百度也没有此类的问题。因此觉得可能就是自己单独的问题。

2、因为测试说的是不能复制,因此感觉是不是项目中引入了什么JS 对IE 禁用了 复制选项。后来查代码没有。

3、自己用IE 测试后,发现是不能选中,而导致的不能复制。感觉有点眉目了,用的 Vue-Element 随机去查看 是否乱写了 textarea多文本框的属性。导致不能选中,发现也没有。

4、通过摸排代码发现了。CSS 样式中,不知道为啥有个 user-select: auto 属性??? ,随即发现问题根本所在!!! 

5、user-select: auto 相当与【默认。如果浏览器允许,则可以选择文本。】,因为IE浏览器默认是不允许,因此IE浏览器就不能选中文本,而谷歌浏览器,默认允许复制,因此没有问题。

CSS user-select 属性 详解

  • 防止选中元素文本。

  不限于 div、input单文本输入框、 textarea多文本框 等等,都可以使用!!!

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
  • 语法
user-select: auto|none|text|all;
  • 属性值
描述
auto 默认。如果浏览器允许,则可以选择文本。
none 防止文本选取。
text 文本可被用户选取。
all 单击选取文本,而不是双击。

 

参看资料:

  还是那句话,HTML、CSS、JS 等其他问题,推荐 首选 MDN查看。

user-select - CSS(层叠样式表) | MDN

 

posted @ 2022-05-13 15:51  不言谢  阅读(402)  评论(0编辑  收藏  举报