在 contenteditable=true 时选择文本将复制样式为 user-select=none 的节点的文本；

【问题标题】：Selecting text while contenteditable=true will copy text of nodes with style user-select=none;在 contenteditable=true 时选择文本将复制样式为 user-select=none 的节点的文本；
【发布时间】：2018-05-30 10:41:52
【问题描述】：

有问题。当您打开 Fiddle 时，您将看到一个 contenteditable 页面。有些节点的样式是user-select=none，当你按ctrl-a全选时，你会看到所有内容都被选中，没有那些样式user-select:none

但是如果你用 ctrl-c 复制选定的文本并打开记事本并粘贴它，所有带有 user-select=none 的文本都会插入那里。

JS Fiddle

【问题讨论】：

更新：在 chrome 中运行。在这种情况下，Firefox 会忽略 moz-user-select (?)？
user-select 不会阻止复制和粘贴。你可能会觉得这很有帮助——danoc.me/blog/css-prevent-copy
谢谢，但不能阻止复制不可复制的内容可能是一件坏事。还有其他想法吗？

标签： javascript html css contenteditable

【解决方案1】：

您的代码在 Firefox 中运行良好，但在 Chrome、Opera、Safari 中无法正常运行>.

我认为 user-select 值为 none 的属性在某些浏览器中存在一些错误。

在不同的浏览器上试试这个示例代码，你就会知道。

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<p>Selectable text1.</p>
<p class="noselect">Unselectable text1.</p>
<p>Selectable text2.</p>
<p class="noselect">Unselectable text2.</p>

【讨论】：