大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/70

前言

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

兼容性

user-select

用来控制用户是否可以选中文本。全选,部分选中。

全选

在很多时候用户希望的可能是一次性复制完整的内容,例如一段代码,密码,一些key。

user-select:all : 让用户可以单击选中元素。

这里我们演示了三个不同的Html标签下的效果。


  1. h2 {
  2. user-select: all;
  3. }
  4. code {
  5. user-select: all;
  6. width: 500px;
  7. display: block;
  8. padding: 10px;
  9. color: #31808c;
  10. background-color: #f5f4ef;
  11. }
  12. div {
  13. user-select: all;
  14. }
  1. <h2>点击试试看</h2>
  2. <pre>
  3. <code>
  4. const num = 1;
  5. const result = (function () {
  6. delete num;
  7. return num;
  8. })();
  9. console.log(result);
  10. </code>
  11. </pre>
  12. <p>
  13. const num = 1; const result = (function () { delete num; return num; })();
  14. console.log(result);
  15. </p>

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

禁止选中

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

部分选中

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

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

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

当你想复制这段文本的时候:我后面有个角标1我前面有角标,这个角标也会被复制下来。

此时我们就需要针对角标设置,这样设置还可以保证当你p标签是user-select:all的时候,复制也会忽略角标!

  1. sup {
  2. -webkit-user-select: none;
  3. user-select: none;
  4. }

扩展:设置选中式样

CSS提供了::selection`伪元素来设置文本选择的样式

您可以通过定位::selection伪元素来设置文本选择的样式。但是,只有下面的几个属性可以设置:

  1. color
  2. background-color
  3. cursor
  4. caret-color
  5. outline and its longhands
  6. text-decoration and its associated properties
  7. text-emphasis-color (en-US)
  8. text-shadow

例如

  1. p::selection {
  2. color: #fffaa5;
  3. background-color: #f38630;
  4. text-shadow: 2px 2px #31808c;
  5. }

选中后的效果如下:

纯CSS如何禁止用户复制网页的内容?的更多相关文章

  1. [No0000168]Excle只允许用户输入纯文本,禁止用户修改单元格样式、格式等

    背景:自己的模板给别人,让他填完信息上传到系统里,但别人经常不按模板的格式来填写,导致无法程序自动化.能不能在模板上把格式锁住,只允许输入纯文本,但不能改格式? 方法: 步骤一,创建你要的模板 其中, ...

  2. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  3. html页面禁止用户右键粘贴复制保存的代码

    HTML页面禁止选择.页面禁止复制.页面禁止右键 原创古城寨主2018-03-01 17:50:59评论(1)228人阅读   HTML页面内容禁止选择.复制.右键 刚在一个看一个站点的源代码的的时候 ...

  4. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  5. CSS3禁止用户选中文字——user-select: none;

    需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图    解决方法:使用CSS3新增属性 user-select: none;   -webkit-user-select:non ...

  6. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  7. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

  8. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  9. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. 手把手教你从零写一个简单的 VUE

    本系列是一个教程,下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单的类似 VUE 一样的前端框架,VUE 框架现在应 ...

  2. Vue-cli的打包初体验

    前言:我司是一个教育公司,最近要做一个入学诊断的项目,领导让我开始搭建一套基于vue的H5的开发环境.在网上搜集很多的适配方案,最终还是选定flexible方案.选择它的原因很简单: 它的github ...

  3. js select 删除某一项下拉列表的值

    <script type="text/javascript"> //muqingwei modify 通过群组类别选择需要的的群组 var mySelect = doc ...

  4. CSS简单样式练习(五)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. Spring-JdbcTemplate(注入到spring容器)-02

    1.导入spring-jdbc和spring-tx坐标 <dependency> <groupId>junit</groupId> <artifactId&g ...

  6. 不用关闭重启cad及不用更改快捷方式或者版本号c#调试cad插件

    c#开发的cad插件需要重启cad才能进行调试,然而高版本的cad启动比较慢特别是一些古董电脑,而且cad有重启次数限制.针对不用重启cad调试已经有成熟的方案了,但是需要调试一次修改一次快捷方式或者 ...

  7. BI系统打包Docker镜像及容器化部署的具体实现

    在过去的几年中,"云"作为明星热词站在了各种新潮技术之中,你可能使用过,但说不清它的原理:或者是没用过,但听过它的大名:也可能连它的名字都没听过,但你对这只蓝色鲸鱼一定十分眼熟.作 ...

  8. 帝国cms 列表页或文章页取当前栏目链接

    获取当前栏目链接 : <?=sys_ReturnBqClassUrl($class_r[$GLOBALS[navclassid]]);?>获取当前栏目名称 :[!--class.name- ...

  9. vue3响应式模式设计原理

    vue3响应式模式设计原理 为什么要关系vue3的设计原理?了解vue3构建原理,将有助于开发者更快速上手Vue3:同时可以提高Vue调试技能,可以快速定位错误 1.vue3对比vue2 vue2的原 ...

  10. java 竞赛常用方法

    一,基本数据类型 1.int,float.double等转换为字符串用 String.valueOf方法 eg:double转换为String Double dtDouble=12.31354; St ...