纯CSS如何禁止用户复制网页的内容


Posted in HTML / CSS onNovember 01, 2021

前言

在敲打自己的个人博客时,在博客的详情页,对于不同的内容,我是想有不同的复制方式的。例如代码块我就想读者单击就可以复制,这样方便读者本地调试,而对于文字描述部分,希望可以不允许读者复制。作为一个坚定的能用CSS绝不上JS的极端份子,我最终找到了CSS3中的user-select。

兼容性

纯CSS如何禁止用户复制网页的内容

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>

纯CSS如何禁止用户复制网页的内容

不过all同样存在一个令人尴尬的缺点,只要你设定了all,那你就不能选中部分内容。

禁止选中

对于网页中的元素,可以使用user-select: none; 禁止用户选中内容。

部分选中

为啥会有这个说法吗,对于通常的网页,我们是可以选择特定的内容的。例如在下面的页面中,我们就可以部分选择内容,

纯CSS如何禁止用户复制网页的内容

但是这里的标题的部分,主要是指在对立面无法选中的元素。例如html中有这样一个标签sup,这个标签主要是用来给元素添加角标。

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

当你想复制这段文本的时候:我后面有个角标1我前面有角标,这个角标也会被复制下来。
此时我们就需要针对角标设置,这样设置还可以保证当你p标签是user-select:all的时候,复制也会忽略角标!

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

纯CSS如何禁止用户复制网页的内容

扩展:设置选中式样

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如何禁止用户复制网页的内容的文章就介绍到这了,更多相关CSS禁止用户复制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
You might like
pdo中使用参数化查询sql
2011/08/11 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
Python中的模块和包概念介绍
2015/04/13 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python批量爬取下载抖音视频
2019/06/17 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
打架检讨书800字
2014/01/10 职场文书
教师个人鉴定材料
2014/02/08 职场文书
党员党性分析材料
2014/02/17 职场文书
中文教师求职信
2014/02/22 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
新郎结婚保证书
2015/02/26 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
辩护词范文大全
2015/05/21 职场文书
安全第一课观后感
2015/06/18 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书