Select still copies to clipboard
I just discovered the user-select attribute of CSS. I was wanting to find a way for people to copy the displayed results on a page, without copying the headings as well (and a few other things). Each browser is a bit different when they attempt to select something. But I've been testing mainly in 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;
}
The results:
To me, it looks like they would only be able to copy the highlighted text. However, when copying what is highlighted - it does have heading 2 , but it did not copy heading 1 . Why is this?
This text you can select & copy.
Heading 2 - can't select it
This text you can select & copy.
I don't really think its all that surprising, the user-select property is to prevent a user from selecting an elements' content. Nowhere in the Basic UI Module does it mention the behaviour regarding copying content. I would imagine this is why there are variations among different browsers.
MDN also states:
Controls the appearance (only) of selection. This does not have any affect on actual selection operation.
The comments in this WebKit Bugzilla report also say the same thing.
I had the same problem and found the following solution. 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);
}
下一篇: 选择仍然复制到剪贴板