用user-selection实现让页面上的内容不能被选中

本文介绍了一种通过CSS user-selection属性禁止网页文字被选中的方法。该方法能有效阻止内容被盗用,提升SEO效果,但同时保持了代码块可选中以便用户复制。文章还提供了跨浏览器兼容性的解决方案。

最开始发现这个功能是在陌小雨的博客中,然后自己百度发现用的是user-selection功能,之前网上有很多关于禁止右键,禁止复制,禁止粘 贴,禁止剪切等都弱爆了。这个功能正好使用到我的网站上啊,(你如果现在选中一下我网站的文字你会发现不能选中,但是下面代码确实可以选中的,这就是我设 置后的效果。)虽然使用了这个功能之后”用户体验“可能会差一点,但是对于SEO确实极好的,这样禁止了别人复制我的文章,别人只能在我的网站上来看这个 东西,所以对于SEO是有好处的。但是其实查看源代码还是可以复制我文章的内容,只不过源代码中多了很多的其他HTML标签,显得很乱,不过这个 user-selection功能用来装逼也是极好的。使用方法就是把这个功能加入到指定的class中或id中,比如我是加入到我文章页 single.php中,就是说只让我的文章内容不能被选中,但是标题,等不属于文章页的都可以被选中和复制,但是又有一个问题了,就是我文章中有一些代 码是想要让访问者复制的,这个怎么办呢?当然还是想到了CSS的优先级了,我单独给我的代码加上user-selection可以被选中的内联样式就可以 了

加入的时候像下面这样加,是为了浏览器的兼容性:

/*下面的body可以改成任意的id或class*/
body{
    -webkit-user-select:none;/*谷歌浏览器和Safari浏览器*/
    -moz-user-select:none;/*火狐浏览器*/
    -ms-user-select:none;/*部分IE浏览器*/
    user-select:none;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值