记得很久以前很多站点为了防止文章被复制都用JS屏蔽了右键及一些复制剪切的功能,一直觉得这种代码比较“下三滥”没怎么去关注,而且浏览器的兼容性也存在一定的问题,没想到内网也有需要这个功能的时候,还是紧急需求。。。

google之大多是一些粘贴复制的无用信息,不过了解到了两个关键词 oncontextmenuctrlKey,有了这两个关键词,屏蔽功能很简单了,于是就有了这个简单的jQuery插件。

  1. ;(function($){   
  2.     $.extend({   
  3.         disableCopyPaste : function(elm){   
  4.             var $elm = $(elm),   
  5.                 ctrlDown = false,   
  6.                 ctrlKey = 17,   
  7.                 cKey = 67,   
  8.                 vKey = 86,   
  9.                 xKey = 88;   
  10.   
  11.             // 禁止右键   
  12.             elm.oncontextmenu = function(){   
  13.                 return false;   
  14.             }   
  15.   
  16.             // 按下ctrl键的时候做个标记   
  17.             $elm.keydown(function(e){   
  18.                 if (e.keyCode == ctrlKey){   
  19.                     ctrlDown = true;   
  20.                 }   
  21.             }).keyup(function(e){   
  22.                 if (e.keyCode == ctrlKey){   
  23.                     ctrlDown = false;   
  24.                 }   
  25.             });   
  26.   
  27.             // 按ctrl的同时又按c || v || x   
  28.             $elm.keydown(function(e){   
  29.                 if (ctrlDown && (e.keyCode == cKey || e.keyCode == vKey || e.keyCode == xKey)){   
  30.                     return false;   
  31.                 }   
  32.             });   
  33.         }   
  34.     });   
  35. })(jQuery);  

调用方法:

  1. $.disableCopyPaste(document);  

jQuery用的多了现在写JS的时候动不动就想着用jQuery的方法,唉,这样不好啊,能不用就不用吧。
于是在这个功能完成上线之后趁着有空另外写了一个。

  1. function disableCopyPaste(elm) {   
  2.     elm.oncontextmenu = function() {   
  3.         return false;   
  4.     }   
  5.   
  6.     elm.onkeydown = interceptKeys;     
  7. }   
  8.   
  9. function interceptKeys(evt) {   
  10.     var evt = evt || window.event,   
  11.         c = evt.keyCode,   
  12.         ctrlDown = evt.ctrlKey;   
  13.   
  14.     if (ctrlDown && c===67) { // c   
  15.         return false;   
  16.     } else if (ctrlDown && c===86) { // v   
  17.         return false;   
  18.     } else if (ctrlDown && c===88) { // x   
  19.         return false;   
  20.     } else {   
  21.         return true;   
  22.     }      
  23. }   
  24.   
  25. disableCopyPaste(document);  

这个调用方法就不用写了吧,哈哈~
总结一下,想象中浏览器功能性的兼容性并没有出现,但是功能却并没有很好的完成,BUG无数啊:

  • 功能靠JS实现,禁用掉JS或者host绑在本地调用自己的代码肯定没有影响(废话);
  • 选好内容往输入框里拖是可以的,主流的浏览器竟然都可以的,IE6就没测了,再可以就太伤心了,上午搞了一下也没能找到屏蔽这个的方法 -_-!
  • 另外浏览器自带的功能,比如在firefox下,选好内容,然后 主菜单 -> 编辑 -> 里面就有各种粘贴复制功能,还有firebug等各种调试工具。。。
  • 还有其他的键盘布局、其他操作系统下的ctrlKey和各种按键keycode是不是一样呢。。。
  • 最后一句,已经显示在页面上的东西真的想要复制出去怎么会没有办法呢?反而给我们的日常工作带来很多麻烦,何必呢?