前言

在敲打自己的個人博客時，在博客的詳情頁，對于不同的內容，我是想有不同的復制方式的。例如代碼塊我就想讀者單擊就可以復制，這樣方便讀者本地調試，而對于文字描述部分，希望可以不允許讀者復制。作為一個堅定的能用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;
}

選中后的效果如下：

到此這篇關于純CSS如何禁止用戶復制網頁的內容的文章就介紹到這了,更多相關CSS禁止用戶復制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論