Utente-Seleziona ancora copie negli appunti

Question

Ho appena scoperto l'attributo user-select di CSS. Volevo trovare un modo per le persone di copiare i risultati visualizzati su una pagina, senza copiare anche i titoli (e alcune altre cose). Ogni browser è leggermente diverso quando tentano di selezionare qualcosa. Ma ho provato principalmente su 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; 
} 

I risultati:

A me, sembra che essi sarebbero in grado di copiare il testo evidenziato. Tuttavia, quando si copia ciò che è evidenziato, ha heading 2, ma non ha copiato heading 1. Perché è questo?

This text you can select & copy. 

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

Answer 1

io non credo proprio così sorprendente, la proprietà user-select è quello di impedire a un utente di selezionando contenuti un elementi. In nessuna parte dello Basic UI Module si parla del comportamento relativo alla copia del contenuto. Immagino che questo è il motivo per cui ci sono variazioni tra i diversi browser.

MDN afferma anche:

controlla l'aspetto (solo) di selezione. Questo non ha alcun effetto sull'operazione di selezione effettiva.

I commenti in questo rapporto WebKit Bugzilla dicono anche la stessa cosa.

Answer 2

Ho avuto lo stesso problema e ho trovato la seguente soluzione. 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); 
}