web-dev-qa-db-ja.com

テキストを選択不可およびコピー不可にする（コピー可能なテキストで囲まれているWebkit）

次のスニペットは、テキストを選択不可にする方法を示しています。残念ながら、Chromeでどちらかの側のテキストを選択すると、選択していないテキストもコピーして貼り付けると貼り付けられます。

選択できないコンテンツをコピーして貼り付け、選択できないコンテンツを貼り付けないように、たくさんの書き込みを行う方法はありますか？

.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>

http://codepen.io/regan-ryan/pen/XdodGx

編集：このトピックにはすでに12の質問のようなものがあるので、この質問は重複している可能性があるようです。しかし、徹底的に調べても特定の問題が見つからなかったので、より具体的な質問タイトルを付けた独自の質問に値すると思いました。

htmlcssselection
9
Mirror318

より多くの回避策：CSSで生成されたコンテンツがクリップボード（*）で表示されないという事実を利用できるため、テキストが属性に移動された空のスパンでは、要求されたclibpoardの動作と視覚的に類似した結果が得られます。

[data-text] {
  color: orange;
}
[data-text]::after {
  content: attr(data-text);
}
<div>Hello this text is selectable <span data-text="but I'm not"></span> You can select me all day!</div>

http://codepen.io/myf/pen/jqXrNZ

アクセシビリティ/ SEOが問題にならない場合は、これが解決策になる可能性があります。それ以外の場合は、HTMLの実際のテキストである可能性がありますが、スクリプト「オンデマンド」で属性に移動されます。

（*）更新：コメントに記載されているように（ CSSを使用してテキスト選択の強調表示を無効にする方法は？ ）Internet Explorerは、実際にはクリップボードにCSSで生成されたコンテンツを含みます。ああ。

19
myf

cssは選択のハイライトを無効にすることができますが、テキストをコピーしないようにしたい場合は、この小さなjqueryコードを使用してください

$('.hide').on('copy paste cut drag drop', function (e) {
   e.preventDefault();
});

$('.hide').on('copy paste cut drag drop', function (e) {
       e.preventDefault();
    });
.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>
2
Gaurav Aggarwal

window.getSelectionを使用して、強調表示されたテキストを読み上げることができます。次のコード例を試して、コンソールを調べてください。これにより、文字列から不要なテキストを削除してクリップボードにコピーできます。しかし、これは非常に単純ではなく、おそらく不可能ですらあります。これは単なるアイデアです。

function getSelectedText() {
  console.log(window.getSelection());
}

document.onmouseup = getSelectedText;
document.onkeyup = getSelectedText;
.hide {
  color: orange;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
<!-- begin snippet: js hide: false -->
<div>Hello this text is selectable <span class="hide" unselectable="on">but I'm not</span> You can select me all day!</div>
2
roNn23