純CSS如何禁止使用者複製網頁的內容？

搞前端的半夏發表於2022-05-25
CSS網頁

大家好，我是半夏?，一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章，可以關注➕ 點贊 ? 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,瞭解更多前端知識! 點我探索新世界！

原文連結 ==>http://sylblog.xin/archives/70

前言

在敲打自己的個人部落格時，在部落格的詳情頁，對於不同的內容，我是想有不同的複製方式的。例如程式碼塊我就想讀者單擊就可以複製，這樣方便讀者本地除錯，而對於文字描述部分，希望可以不允許讀者複製。作為一個堅定的能用CSS絕不上JS的極端份子，我最終找到了CSS3中的user-select。

相容性

image-20211025104003855

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>

user-selcet

不過all同樣存在一個令人尷尬的缺點，只要你設定了all，那你就不能選中部分內容。

禁止選中

對於網頁中的元素，可以使用user-select: none; 禁止使用者選中內容。

部分選中

為啥會有這個說法嗎，對於通常的網頁，我們是可以選擇特定的內容的。例如在下面的頁面中，我們就可以部分選擇內容，

imgd21fa9dd13f94582b592c2c3ce45ca0a~tplv-k3u1fbpfcp-zoom-1

但是這裡的標題的部分，主要是指在對立面無法選中的元素。例如html中有這樣一個標籤sup,這個標籤主要是用來給元素新增角標。

    <p>我後面有個角標<sup>1</sup>我前面有角標</p>

當你想複製這段文字的時候：我後面有個角標1我前面有角標，這個角標也會被複制下來。

此時我們就需要針對角標設定,這樣設定還可以保證當你p標籤是user-select:all的時候，複製也會忽略角標！

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

image-20211025112820611

擴充套件：設定選中式樣

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

選中後的效果如下：

image-20211025142901926

相關文章