利用CSS控制页面文字不能被选中复制

当我们不希望用户在网页上通过鼠标选择文本并复制时,通常大家可以通过加JS代码来实现,其实有另一个方法就是,将-webkit-user-select 和-moz-user-select 的值设为none。

利用CSS控制页面文字不能被选中复制

其实这个方法针对普通用户是有效的,但无法防止对网页技术比较了解的用户,所以真正要复制走你的文字办法还是很多。比如通过搜索引擎保留的快照、网页开发者工具、网页另存到本地去除禁止代码等。

以下是CSS控制页面的文字无法被鼠标选中的代码,不同的浏览器设置的内容不一样,user-select不是一个W3C的标准,浏览器的支持不完成,需要对不同的浏览器进行调整。

<style type=”text/css”>

body{

-webkit-touch-callout:none; /*系统默认菜单被禁用*/

-webkit-user-select:none; /*webkit浏览器*/

-khtml-user-select:none; /*早期浏览器*/

-moz-user-select:none; /*火狐*/

-ms-user-select:none; /*IE10*/

user-select:none; /*用户是否能够选中文本*/

}

</style>

/*设置IOS页面长按不可复制粘贴,但是IOS上出现input、textarea不能输入,因此将使用-webkit-user-select:auto;*/

四个属性值的说明:

1、none:用none,子元素所有的文字都不能选择,包括input输入框中的文字也不能选择。

2、-moz-all:子元素所有的文字都可以被选择,但是input输入框中的文字不可以被选择。

3、-moz-none:子元素所有的文字都不能选择,但是input输入框中的文字除外。

4、user-select:有2个值(none表示不能选中文本,text表示可以选择文本)。

如果要屏蔽右键可以用JS编写的脚本,可以在body中加入:oncontextmenu=self.event.returnValue=false。

再分享两个body禁止左键与右键的脚本写法:

1、<body oncontextmenu=self.event.returnValue=false onselectstart=”return false”>

2、<body onmousemove=/HideMenu()/ oncontextmenu=”return false” ondragstart=”return false” onselectstart =”return false” onselect=”document.selection.empty()” oncopy=”document.selection.empty()” onbeforecopy=”return false” onmouseup=”document.selection.empty()”>

三个属性值的说明:

1、oncontextmenu:右键菜单事件。

2、onselectstart:选中网页内容事件。

3、oncopy:复制网页内容事件。

通过脚本屏蔽是很容易被解除的,之前一篇文章中已有分享,有兴趣请点击阅读:网页内容不能左键选择文字与右键被禁止的破解方法。

SEO运营课程

最后,如果你想了解一下SEO行业的推广逻辑和推广方法,或者是有计划想通过SEO来进行创业或者进行就业、变现赚钱的你,不妨看看这个专属的SEO配套课程:

SEO推广体系课

特别申明:本站的主旨在于收集互联网运营相关的干货知识,给运营小伙伴提供便利。网站所收集到的公开内容均来自于互联网或用户投稿,并不代表本站认同其观点,也不对网站内容的真实性负责,如有侵权,请联系站长删除,转载请注明出处:利用CSS控制页面文字不能被选中复制:https://www.zcly.cn/102924.html。
(0)
网站运营师的头像网站运营师贡献者
上一篇 2022年11月5日 08:33
下一篇 2022年11月5日 19:04

猜你喜欢

发表回复

登录后才能评论

QQ:1124602020
微信:vl54120
备注:周一至周五全天在线,周末可能不在线,另外联系时,请告知来意。

公众号
交流群
运营狗会员,开通可享海量资源与多项权益,点击了解详情