用户选择仍然复制到剪贴板

Question

我刚刚发现了CSS的user-select属性。我想找到一种方法让人们在页面上复制显示的结果，而不复制标题（以及其他一些东西）。每个浏览器在尝试选择某些内容时都会有所不同。但我一直在测试Chrome。 Fiddle Code

HTML

<div>
    <span class="no-select heading">Heading 1 - can't select it</span>
    <p>This text you can select & copy.</p>
    <span class="no-select heading">Heading 2 - can't select it</span>
    <p>This text you can select & copy.</p>
</div>

CSS

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

结果：

对我来说，看起来他们只能复制突出显示的文本。但是，当复制突出显示的内容时 - 它确实有heading 2，但它没有复制heading 1。为什么是这样？

This text you can select & copy.

Heading 2 - can't select it
This text you can select & copy.

Answer 1

我并不认为这一切令人惊讶，user-select属性是为了防止用户选择元素的内容。在Basic UI Module中没有提到复制内容的行为。我想这就是为什么不同浏览器之间存在差异的原因。

MDN还说：

控制选择的外观（仅限）。这对实际选择操作没有任何影响。

这篇WebKit Bugzilla报告中的评论也说了同样的话。

Answer 2

我有同样的问题，并找到了以下解决方案。 https://danoc.me/blog/css-prevent-copy/

HTML：

<p data-pseudo-content="Lorem Ipsum"></p>

CSS：

[data-pseudo-content]::before {
  content: attr(data-pseudo-content);
}