css/js设置页面上的文字不被复制

这是一个很叼的技能,至少之前我 碰到过 这种情况,但我并不知道它的原理,以及 怎么搞的

有时候我们并 不想 让我们页面上文字 被复制粘贴,那怎么才能让我们想要的地方的文字, 禁用 万恶的 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 即可;



需要注意的是: 上面的写法也并不是完全兼容所有浏览器,比如:低版本的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样式全都 注销掉,就可以疯狂的复制粘贴了,啊哈哈,神器...


你可能感兴趣的:(css/js设置页面上的文字不被复制)