很多时候，我们看到网站的文章中网页文字无法复制的情况。
我们可以首先把文章保存到本地。
ctrl+s打开网页的html编辑
<style>:root {-webkit-user-select: none;-webkit-touch-callout: none;-ms-user-select: none;-moz-user-select: none;user-select: none;}</style>
这个CSS样式可以全局设置
user-select: none实现防止整个网页内容被选中和复制的效果。
其中:
- :root 选择器匹配HTML文档的根元素
- user-select: none 禁止选中文本
- -webkit-user-select: none 禁止webkit内核浏览器选中文本
- -webkit-touch-callout: none 禁止ios safari选中文本(当你按住文字时候出现的菜单)
- -ms-user-select: none 禁止IE10+选中文本
- -moz-user-select: none 禁止Firefox选中文本
设置这组样式可以兼容各大浏览器,达到防止全局选中文字的目的。
解决办法：none改成auto
<style>:root {-webkit-user-select: auto;-webkit-touch-callout: auto;-ms-user-select: auto;-moz-user-select: auto;user-select: auto;}</style>
知识扩展
user-select
user-select CSS 属性控制用户是否可以选择文本。除文本框外,这不会对作为浏览器用户界面一部分加载的内容(其 chrome)产生任何影响。
语法
/* Keyword values */user-select: none;user-select: auto;user-select: text;user-select: contain;user-select: all;/* Global values */user-select: inherit;user-select: initial;user-select: revert;user-select: revert-layer;user-select: unset;
格式
=auto |text |none |contain |all
CSS
.unselectable {-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10+ */user-select: none;}.all {-webkit-user-select: all;-ms-user-select: all;user-select: all;}
如果我们的网站上有着一些不想让用户复制的文本，我们可以使用此属性。
user-select 属性指定是否可以选择元素的文本。
这对除文本框之外的内容没有任何影响。
.row-of-icons {
-webkit-user-select: none; /* Chrome & Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
此属性也可用于确保选择了整个元素。
.force-select {
user-select: all;
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
}原文始发于微信公众号（利刃信安攻防实验室）：【办公技巧】如何巧妙应对网站中网页文字的禁止复制限制
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论