IE页面表单内容无法选中复制问题(The copy problem cannot be selected for the form content of IE page)

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

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

————————

Ie page form input box, copy problem cannot be selected

The textarea box of the IE page form cannot select the copy problem

Preface:

It is important to remember that the pit under development:
Don’t write about the properties you don’t know!!! Don’t copy the code you don’t know!!!

It is important to remember that the pit under development:

Don’t write about the properties you don’t know!!! Don’t copy the code you don’t know!!!

Problem scenario:

In the project, the IE 11 browser is used. As a result, the content of the textarea box cannot be selected and copied. No other form box has this condition. Therefore, very depressed and puzzled.

Solution:

1. Because there is no problem with the local Google browser, I think it is the problem of IE browser. Then Baidu checked whether there are special restrictions on IE browser. As a result, Baidu has no such problems. So I think it may be my own problem.

2. Because the test says that you can’t copy, I feel whether some JS has been introduced into the project and the copy option has been disabled for ie. Did you check the code later.

3. After testing with ie, I found that it can’t be selected, so it can’t be copied. I feel a little confused. Use Vue element randomly to check whether the attribute of # textarea multi text box is scrawled. As a result, it cannot be selected and found.

4. Found by touching the code. In CSS style, I don’t know why there is a user select: Auto attribute, Then find the root of the problem!!!

5. User select: Auto is equivalent to [default. If the browser allows, text can be selected.], Because ie is not allowed by default, ie cannot select text, while Google browser allows copying by default, so there is no problem.

CSS user-select 属性 详解

  • Prevents selected element text.

Not limited to div, input single text input box, textarea multi text box, etc., can be used!!!

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

See information:

In other words, MDN is recommended for HTML, CSS, JS and other problems.

User select – CSS (cascading style sheet) | MDN

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