Question

以下代码段显示了如何使文字无法选择。遗憾的是，如果您在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个问题。但是，经过广泛的搜索后，我找不到我的特殊问题，所以我认为这是一个更具体问题标题的问题。

Answer 1

更多解决方法：您可以利用事实，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

如果不关心辅助功能/搜索引擎优化，这可能是解决方案。在其他情况下，它可能是HTML中的真实文本，但移动到脚本“按需”属性。

（*）更新：如评论中所述（ How to disable text selection highlighting using CSS?）Internet Explorer实际上涉及剪贴板中CSS生成的内容。哎呀。

Answer 2

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>

Answer 3

您可以尝试使用window.getSelection阅读突出显示的文字。请尝试以下代码示例并查看控制台。这样，您可以从字符串中删除不需要的文本并将其复制到剪贴板。但这不是很简单，甚至可能都不可能。这只是一个想法。

＆＃13;

function getSelectedText() {
  console.log(window.getSelection());
}

document.onmouseup = getSelectedText;
document.onkeyup = getSelectedText;

＆＃13;

.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 -->

＆＃13;

<div>Hello this text is selectable <span class="hide" unselectable="on">but I'm not</span> You can select me all day!</div>

＆＃13;

使文本无法选择和不可复制（webkit，同时被可复制文本包围）

3 个答案: