这是一个很叼的技能,至少之前我 碰到过 这种情况,但我并不知道它的原理,以及 怎么搞的;
有时候我们并 不想 让我们页面上文字 被复制粘贴,那怎么才能让我们想要的地方的文字, 禁用 万恶的 Ctrl +C /Ctrl + V 快捷键呢,很简单,只用简单的设置文字所在标签的 css样式,就能保证文字不能够被复制了;
一. 怎么设置文字不被复制?
设置 css 中的 user-select 属性, 这里是 针对大部分的现代浏览器,对于 低版本的ie浏览器,只能通过 js 来设置;
PS: 低版本的浏览器,主要指 ie6~ie9 ;
/*设置网页文字不被复制*/
user-select: none;
但是user-select属性 并不是兼容所有的浏览器,它并 不是W3C对于CSS规范的标准属性,所以 浏览器对该属性的支持并不完整,需要加各大浏览器的 私有前缀;
1.2 user-select 的兼容大部分现代浏览器写法如下:
只用修改 css 即可;
<style>
// 节点标签
Element {
user-select: none;
/*火狐*/
-moz-user-select: none;
/*谷歌、Safari*/
-webkit-user-select: none;
/*IE10*/
-ms-user-select: none;
/*欧朋*/
-o-user-select: none;
/*早期浏览器*/
-khtml-user-select: none;
}
</style>
需要注意的是: 上面的写法也并不是完全兼容所有浏览器,比如:低版本的IE浏览器
1.3 user-select怎么兼容更低版本的浏览器(IE6~IE9)?
我发现低版本的浏览器,是最恶心的, 只能一个一个设置 css样式,比如IE6~IE9;
1.3.1 IE6~IE9还没有相关的CSS属性,那怎么办?
只能通过 js 来进行设置了,无所不能的js写法如下:
document.body.onselectstart = document.body.ondrag = function(){
return false;
}
这就是IE6-IE9需要用上面的js才能实现,引入的时候我们 需要做一个浏览器版本的判断,如果是IE6-IE9这几个浏览器,就引入上面这一段js代码,其他的用css就可以了;
二. 怎么判断浏览其的版本?
先写个 伪代码 把,稍后在整理片文档;
思路如下:
通过获取浏览器的 userAgent 属性,通过 indexOf 匹配关键字,如果有对应浏览器的 内核字段,就是对应的哪个浏览器,具体的 版本号,我忘了是哪个,先到这把;
三. 同样的道理,碰到我们想复制的文字却不能复制,怎么办?
反其道行之,按 F12,进入 开发者模式 ,然后选中文字所在的 标签,把上面对应的css样式全都 注销掉,就可以疯狂的复制粘贴了,啊哈哈,神器...