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

最开始发现这个功能是在陌小雨的博客中,然后自己百度发现用的是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;
}

posted @ 2015-12-20 16:41  申杰博客  阅读(445)  评论(0编辑  收藏  举报