Question

这不是上述问题的重复

我在我的网站上使用material-icons。要添加图标，您必须制作以下内容：

<p class="material-icons">info_outline</p>

如果我现在复制该图标，它将复制文本＆＃34; info_outline＆＃34;。我知道您可以使用user-select: none;内的css使某个元素无法选择，但是存在问题。

以我的代码段为例。如果我创建p元素，其中span内有user-select: none;，则您无法选择（并因此复制）该范围。但是，如果您复制整个p元素，您仍会获得span的内容。我怎样才能防止这种情况发生？

＆＃13;

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

＆＃13;

<p>Copy this text with a <span>unselectable</span> piece of text... Or is it?</p>
<input type="text" placeholder="Past text here">

＆＃13;

修改由于很多人都认为答案是user-select: none;的问题是重复的问题，所以再看看我的问题。

我知道用户选择如何工作！我知道你可以让一个元素无法选择。但是，如果你选择它周围的元素并复制它的内容，它将复制它的所有内容，甚至包含user-select: none;的元素

Answer 1

首先使元素无法选择：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

这已经可以在Firefox中使用了。要使其在其他浏览器中运行，您必须使用pseudo-elements和data-attribute。

像这样使用data-attribute：

<span data-unselectable="unselectable content"></span>

现在我们可以在伪元素::before或::after的内容中添加此文字：

span::before {
  content: attr(data-unselectable);
}

这是有效的，因为内容属性不会更新dom。

Answer 2

添加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;
}

或者，如果你想让它更好地使用脚本这样的东西。

<script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>

使文字无法复制HTML

2 个答案: