运用CSS控制页面文字不能被选中复制
发布时间：2022-01-15 21:19:13 所属栏目：经验 来源：互联网
导读：当我们不希望用户在网页上通过鼠标选择文本并复制时，通常大家可以通过加JS代码来实现，其实有另一个方法就是，将-webkit-user-select 和-moz-user-select 的值设为none。 其实这个方法针对普通用户是有效的，但无法防止对网页技术比较了解的用户，所以真正
|
当我们不希望用户在网页上通过鼠标选择文本并复制时，通常大家可以通过加JS代码来实现，其实有另一个方法就是，将-webkit-user-select 和-moz-user-select 的值设为none。 其实这个方法针对普通用户是有效的，但无法防止对网页技术比较了解的用户，所以真正要复制走你的文字办法还是很多。比如通过搜索引擎保留的快照、网页开发者工具、网页另存到本地去除禁止代码等。 以下是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：复制网页内容事件。 （编辑：孝感站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
