使文本不可选择和不可复制(webkit，同时被可复制文本包围) [英] Make text unselectable and uncopyable (webkit, while surrounded by copyable text)

问题描述

以下代码段展示了如何使文本不可选择.遗憾的是，如果您在 Chrome 中选择任一侧的文本，当您复制和粘贴未选择的文本时，也会被粘贴.

The following snippet shows how to make text unselectable. Sadly, if you select text on either side in Chrome, when you copy and paste the unselected text also gets pasted.

有没有什么办法可以让大量的文字在整个过程中出现不可选择的内容，您可以复制和粘贴，而不能粘贴任何不可选择的内容?

Is there any way to have a lot of writing, with unselectable content throughout, that you can copy and paste and none of the unselectable content is pasted?

.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 个关于这个主题的问题.但是，经过大量搜索后，我找不到我的特定问题，因此我认为它值得自己提出一个更具体的问题标题.

edit: This question does seem like a possible duplicate, seeing there are something like 12 questions already on this topic. However, I couldn't find my particular problem after extensive searching, so I thought it merits it's own question with a more particular question title.

推荐答案

更多解决方法:您可以利用事实，即 CSS 生成的内容对于剪贴板 (*) 是不可见的，因此将文本移动到您拥有的某些属性的空跨度与请求的剪贴板行为在视觉上相似的结果:

More a workaround: you can exploit fact, that CSS generated content is invisible for clipboard (*), so with empty span with text moved to some attribute you have visually similar result with requested clibpoard behaviour:

[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 中的真实文本，但移动到带有按需"脚本的属性.

If accessibility / SEO is not a concern, this could be the solution. In other case, it could be real text in HTML but moved to attribute with script 'on demand'.

(*) 更新:如评论 (如何使用 CSS 禁用文本选择突出显示? ) Internet Explorer实际上涉及剪贴板中的 CSS 生成内容.啊.

(*) Update: as noted in comment ( How to disable text selection highlighting using CSS? ) Internet explorer actually involves CSS generated content in clipboard. Argh.

这篇关于使文本不可选择和不可复制(webkit，同时被可复制文本包围)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！