时间戳

首页 > 解决方案 > user-select:none 仍然是 Chrome 中复制的富文本的一部分

html - user-select:none 仍然是 Chrome 中复制的富文本的一部分

问题描述

我正在尝试使用此答案将超链接从 Chrome 复制并粘贴为纯文本，当我粘贴到记事本时它似乎可以工作。但是，无论如何user-select: none;，当我将相同的剪贴板内容粘贴到 Libreoffice Writer 时，所有文本都会被粘贴。当样式块被可选块包围时会发生这种情况。

.unselectable {
  position: absolute;
  z-index: 1;
  color: green;
  user-select: none;
  -webkit-user-select: none;
}

.selectable {
  position: absolute;
  z-index: 2;
  color: rgba(0, 0, 0, 0);
  user-select: text;
  -webkit-user-select: text;
}
xxx
<p style="user-select: none;">
  <a href="mailto:unselectable@b.org">unselectable</a>
</p>

<p>
  <a href="mailto:default@b.org">default</a>
</p>

<div>
  <p unselectable="on" class="unselectable">unselectable2</p>
  <p>zzz</p>
</div>

在此处输入图像描述

在此处输入图像描述

标签： htmlcssgoogle-chrome

解决方案

原来这是Chrome中的一个错误。

一种解决方法是使用-web-kit

.parent :not(.selectable-all) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectable-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
<div class="parent">
  <span>un-selectable</span>
  <div class="child selectable-all">
    Selectable
  </div>
</div>

<div class="child selectable-all">
  Selectable
</div>

我试过了，效果很好。试着让我知道它是否也对你有用。

这是一个供参考的链接；用户选择：所有继承在 chrome 62 中都不起作用

推荐阅读