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

目录

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

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

 

作者：静默虚空
欢迎任何形式的转载，但请务必注明出处。
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。