ユーザーがクリップボードにコピーを依頼します

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も述べ：

は、選択の外観を（のみ）コントロール。これは実際の選択操作に影響を与えません。

このWebKit Bugzillaのコメントも同じことを言っています。

Answer 2

私は同じ問題を抱え、次の解決策を見つけました。 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); 
}