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

Question

我刚刚发现了user-selectCSS 的属性.我想找到一种方法让人们在页面上复制显示的结果,而不复制标题(以及其他一些东西).每个浏览器在尝试选择某些内容时都会有所不同.但我一直在测试Chrome.小提琴代码

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属性是为了防止用户选择元素的内容。基本 UI 模块中没有任何地方提到有关复制内容的行为。我想这就是为什么不同浏览器之间存在差异的原因。

MDN还指出：

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

WebKit Bugzilla报告中的评论也说了同样的事情。