前言

在敲打自己的個(gè)人博客時(shí)，在博客的詳情頁(yè)，對(duì)于不同的內(nèi)容，我是想有不同的復(fù)制方式的。例如代碼塊我就想讀者單擊就可以復(fù)制，這樣方便讀者本地調(diào)試，而對(duì)于文字描述部分，希望可以不允許讀者復(fù)制。作為一個(gè)堅(jiān)定的能用CSS絕不上JS的極端份子，我最終找到了CSS3中的user-select。

兼容性

user-select

用來(lái)控制用戶是否可以選中文本。全選，部分選中。

全選

在很多時(shí)候用戶希望的可能是一次性復(fù)制完整的內(nèi)容，例如一段代碼，密碼，一些key。
user-select:all :  讓用戶可以單擊選中元素。
這里我們演示了三個(gè)不同的Html標(biāo)簽下的效果。

 h2 {
        user-select: all;
      }

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

      div {
        user-select: all;
      }

  <h2>點(diǎn)擊試試看</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>

不過(guò)all同樣存在一個(gè)令人尷尬的缺點(diǎn)，只要你設(shè)定了all，那你就不能選中部分內(nèi)容。

禁止選中

對(duì)于網(wǎng)頁(yè)中的元素，可以使用user-select: none; 禁止用戶選中內(nèi)容。

部分選中

為啥會(huì)有這個(gè)說(shuō)法嗎，對(duì)于通常的網(wǎng)頁(yè)，我們是可以選擇特定的內(nèi)容的。例如在下面的頁(yè)面中，我們就可以部分選擇內(nèi)容，

但是這里的標(biāo)題的部分，主要是指在對(duì)立面無(wú)法選中的元素。例如html中有這樣一個(gè)標(biāo)簽sup,這個(gè)標(biāo)簽主要是用來(lái)給元素添加角標(biāo)。

<p>我后面有個(gè)角標(biāo)<sup>1</sup>我前面有角標(biāo)</p>

當(dāng)你想復(fù)制這段文本的時(shí)候：我后面有個(gè)角標(biāo)1我前面有角標(biāo)，這個(gè)角標(biāo)也會(huì)被復(fù)制下來(lái)。
此時(shí)我們就需要針對(duì)角標(biāo)設(shè)置,這樣設(shè)置還可以保證當(dāng)你p標(biāo)簽是user-select:all的時(shí)候，復(fù)制也會(huì)忽略角標(biāo)！

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

擴(kuò)展：設(shè)置選中式樣

CSS提供了::selection`偽元素來(lái)設(shè)置文本選擇的樣式
您可以通過(guò)定位::selection偽元素來(lái)設(shè)置文本選擇的樣式。但是，只有下面的幾個(gè)屬性可以設(shè)置：

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

選中后的效果如下：

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

最新評(píng)論