使文本无法复制HTML

23 浏览
0 Comments

使文本无法复制HTML

这不是与上面问题重复的内容。\n我在我的网站上使用了material-icons。为了添加一个图标，你需要创建以下内容：\n

info_outline

\n如果现在我复制这个图标，它会复制文本\"info_outline\"。我知道你可以使用user-select: none;在你的css中使元素不可选择，但是这会导致一个问题。\n以我的代码片段为例。如果我创建一个p元素，里面有一个span，并设置了user-select: none;，你将无法选择（因此无法复制）这个。然而，如果你复制整个p元素，你仍然会复制的内容。我该如何防止这种情况发生？\n

span {
  user-select: none;
}
input {
  width: 100%;
}

\n

复制这段文本，其中包含一个不可选择的文本片段... 或者不是吗？

\n编辑：\n由于很多人说这是与答案为user-select: none;的问题重复，再看一下我的问题。\n我知道如何使用user-select。我知道你可以使一个元素无法选择。然而，如果你选择周围的元素并复制它的内容，它将复制所有的内容，甚至包括具有user-select: none;的元素。

0

2 答案

0 Comments

问题的原因是希望在网页中的某个元素上禁用文本复制功能，但是复制该元素的时候，不希望复制该元素中的内容。

为了解决这个问题，可以通过以下方法：

1. 使用CSS样式：

.youClass {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

将元素的class设置为"youClass"，通过设置user-select属性为none来禁用文本复制功能。

2. 使用JavaScript脚本：

通过以上脚本，可以禁用指定元素的文本选择功能。在页面加载完成后，通过getElementsByTagName('label')获取所有的label元素，并依次调用disableSelection函数来禁用文本选择功能。

需要注意的是，问题并不在于使元素无法选择，而是在复制该元素时，不希望复制其内容。因此，在回答问题之前，请仔细查看我的问题。

以上提供了使用CSS样式和JavaScript脚本来解决禁止复制元素内容的问题。

0
0 Comments

问题的出现原因是希望阻止用户复制文本内容，但在某些浏览器中，只使用CSS属性无法完全实现这一目标。因此，需要使用伪元素和数据属性来解决这个问题。

解决方法是首先通过CSS属性将元素设置为不可选中：-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;。这在Firefox浏览器中已经起作用。

为了让其他浏览器也能够实现这一效果，可以使用数据属性：<span data-unselectable="unselectable content"></span>。接下来，在伪元素::before或::after中添加文本内容：span::before { content: attr(data-unselectable); }。这样可以实现目标，因为内容属性不会更新DOM。

通过以上方法，可以实现在不同浏览器中阻止用户复制文本内容的目标。

0