由于本人工作单位性质问题(新闻单位),元旦期间接到领导紧急要求将一篇文章禁止选中和复制,当我拿到需求的时候,原以为是很简单的几个件事处理即可解决问题,虽然本屌一直从事后端工作,但也觉得这种事情不在话下,随口答应1小时后即可上线。
当我说出这句话的时候,就很明显,事情没有这么简单。具体情况下如:
我认为这种需求,简单的找个博客复制粘贴即可解决问题,紧急处理一篇文章嘛,领导也说了直接把ID写死即可,后期再安排做成配置。
<style type="text/css">
*{
-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>
那简单啊,我直接通过CSS样式禁止浏览器的选中弹窗事件,不就解决问题了。当我加好代码用自己的手机测试的时候 ,唉,好像没变化,随即,再找了一篇文章,我再加上几个操作事件处理,代码如下:
<script type="application/javascript">
//PC端 使右键和复制失效
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
//ios
document.oncontextmenu = function (e) {
e.preventDefault();
};
document.onselectstart = function (e) {
e.preventDefault();
};
//安卓
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
document.ontouchend = function () {
throw new Error("NO ERRPR:禁止长按弹出");
}
window.ontouchstart = function(e) {
e.preventDefault();
};
document.body.addEventListener('touchstart', function () { });
document.body.onbeforecopy = function () {
window.getSelection().removeAllRanges();
}
document.body.oncopy = function () {
window.getSelection().removeAllRanges();
return false;
}
</script>
经过再次测试发现没有问题了,PC无法选中,也无法复制,拿下手机测试,长按也不再有任何弹窗,然后马上@运维同志安排上线。
当上线完成过后,通知群内其他同事一起测试,然后就爆炸了,大部分手机没有问题的,但发现有少量手机安装了QQ浏览器、百度浏览器的同志反应,依旧不生效。经过多次百度(都是国产浏览器的问题,找G哥也没用),发现网上也有少量的人也有反应此类问题,并未找到解决方案,本屌也尝试找了2个小时,也并未找到理想的解决方案。唉,放弃了。
后来寻问了前端同事,和一些做前端的大佬,都没有找到理想的解决方案。没办法,暂时放弃解决QQ浏览器和百度浏览器的问题。。如果有哪位大佬有解决方案,本屌万分感情。