Użytkownik - wybierz wciąż kopie do schowka

Question

Właśnie odkryłem atrybut CSS dla user-select. Chciałem znaleźć sposób na skopiowanie wyświetlanych wyników na stronę, bez kopiowania nagłówków (i kilku innych rzeczy). Każda przeglądarka jest nieco inna, gdy próbują wybrać coś. Ale testowałem głównie w 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; 
} 

Wyniki:

Dla mnie to wygląda byliby tylko w stanie skopiować zaznaczony tekst. Jednak podczas kopiowania tego, co jest podświetlone - ma ono wartość heading 2, ale nie skopiowano heading 1. Dlaczego tak jest?

This text you can select & copy. 

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

Answer 1

I naprawdę nie sądzę, że wszystko jest zaskakujące, właściwość user-select to uniemożliwić użytkownikowi wybieranie zawartości Elements. Nigdzie w numerze Basic UI Module nie wspomniano o zachowaniu dotyczącym kopiowania treści. Wyobrażam sobie, że właśnie dlatego istnieją różnice między różnymi przeglądarkami.

MDN stwierdza również:

Steruje wygląd (tylko) z wyboru. Nie ma to żadnego wpływu na rzeczywistą operację wyboru.

Komentarze w tym raporcie WebKit Bugzilla również mówią to samo.

Answer 2

Miałem ten sam problem i znalazłem następujące rozwiązanie. 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); 
}