乐趣区

关于css:纯CSS如何禁止用户复制网页的内容

jiezi

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏, 理解更多前端常识! 点我摸索新世界！

原文链接 ==>http://sylblog.xin/archives/70

前言

在敲打本人的集体博客时，在博客的详情页，对于不同的内容，我是想有不同的复制形式的。例如 代码块 我就想读者单击就能够复制，这样不便读者本地调试，而对于文字描述局部，心愿能够不容许读者复制。作为一个动摇的能用 CSS 绝不上 JS 的极其份子，我最终找到了 CSS3 中的 user-select。

兼容性

user-select

用来管制用户是否能够选中文本。全选，局部选中。

全选

在很多时候用户心愿的可能是一次性复制残缺的内容，例如一段代码，明码，一些 key。

user-select:all : 让用户能够单击选中元素。

这里咱们演示了三个不同的 Html 标签下的成果。


 h2 {user-select: all;}

      code {
        user-select: all;
        width: 500px;
        display: block;
        padding: 10px;
        color: #31808c;
        background-color: #f5f4ef;
      }

      div {user-select: all;}
  <h2> 点击试试看 </h2>
    <pre>
        <code>
        const num = 1;

        const result = (function () {
          delete num;
          return num;
        })();
        
        console.log(result);
        </code>
    </pre>
    <p>
      const num = 1; const result = (function () {delete num; return num;})();
      console.log(result);
    </p>

不过 all 同样存在一个令人难堪的毛病，只有你设定了 all，那你就不能选中局部内容。

禁止选中

对于网页中的元素，能够应用user-select: none; 禁止用户选中内容。

局部选中

为啥会有这个说法吗，对于通常的网页，咱们是能够抉择特定的内容的。例如在上面的页面中，咱们就能够局部抉择内容，

然而这里的题目的局部，次要是指在对立面无奈选中的元素。例如 html 中有这样一个标签 sup, 这个标签次要是用来给元素增加角标。

    <p> 我前面有个角标 <sup>1</sup> 我后面有角标 </p>

当你想复制这段文本的时候：我前面有个角标 1 我后面有角标，这个角标也会被复制下来。

此时咱们就须要针对角标设置, 这样设置还能够保障当你 p 标签是 user-select:all 的时候，复制也会疏忽角标！

sup {
  -webkit-user-select: none;
  user-select: none;
}

扩大：设置选中式样

CSS 提供了::selection` 伪元素来设置文本抉择的款式

您能够通过定位 ::selection 伪元素来设置文本抉择的款式。然而，只有上面的几个属性能够设置：

color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color (en-US)
text-shadow

例如

p::selection {
  color: #fffaa5;
  background-color: #f38630;
  text-shadow: 2px 2px #31808c;
}

选中后的成果如下：

退出移动版