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

Question

下面的 sn-p 显示了如何使文本不可选择。遗憾的是，如果您在 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 生成的内容对剪贴板 (*) 不可见这一事实，因此，将文本移动到某个属性的空白跨度与请求的剪贴板行为具有视觉上相似的结果：

[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 中的真实文本，但通过脚本“按需”移动到属性。

(*) 更新：如评论中所述 ( 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 阅读突出显示的文本。请尝试以下代码示例并查看控制台。有了这个，您可以从字符串中删除不需要的文本并将其复制到剪贴板。但这不是很简单，甚至不可能。这只是一个想法。

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>

Answer 4

在样式属性或css文件中使用user-select: none;。