当我们不希望用户在网页上通过鼠标选择文本并复制时,通常大家可以通过加JS代码来实现,其实有另一个方法就是,将-webkit-user-select 和-moz-user-select 的值设为none。
其实这个方法针对普通用户是有效的,但无法防止对网页技术比较了解的用户,所以真正要复制走你的文字办法还是很多。比如通过搜索引擎保留的快照、网页开发者工具、网页另存到本地去除禁止代码等。
以下是CSS控制页面的文字无法被鼠标选中的代码,不同的浏览器设置的内容不一样,user-select不是一个W3C的标准,浏览器的支持不完成,需要对不同的浏览器进行调整。
-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; /*用户是否能够选中文本*/
/*设置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表示可以选择文本)。
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论

学习一下
?