html - 用户选择静止图像复制到剪贴板

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还指出:

Controls the appearance (only) of selection. This does not have any affect on actual selection operation.

此WebKit Bugzilla中的评论报道也说了同样的话。