纯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 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
You might like
PHP弹出对话框技巧详细解读
2015/09/26 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
JQuery实现定时刷新功能代码
2017/05/09 jQuery
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python深入学习之装饰器
2014/08/31 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
Python try except else使用详解
2021/01/12 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
财务主管自我鉴定
2014/01/17 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
大学生活感想
2015/08/10 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL