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

Question

以下代码段显示了如何使文本无法select。遗憾的是，如果您在 Chrome 中的任一侧 select 文本，当您复制并粘贴未 select 编辑的文本时也会被粘贴。

有没有什么办法可以写很多东西，整个内容都是不select可以复制和粘贴的，none不select不可以的内容是粘贴了吗？

.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 可以禁用选择突出显示，但如果你不想使用复制文本，请使用这一小段 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 2

更多解决方法：您可以利用以下事实，即 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 中的真实文本，但使用脚本 'on demand'.

移动到属性

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

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

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

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

Make text unselectable and uncopyable (webkit, while surrounded by copyable text)

html

css

selection