记得很久以前很多站点为了防止文章被复制都用JS屏蔽了右键及一些复制剪切的功能,一直觉得这种代码比较“下三滥”没怎么去关注,而且浏览器的兼容性也存在一定的问题,没想到内网也有需要这个功能的时候,还是紧急需求。。。
google之大多是一些粘贴复制的无用信息,不过了解到了两个关键词 oncontextmenu 和 ctrlKey,有了这两个关键词,屏蔽功能很简单了,于是就有了这个简单的jQuery插件。
- ;(function($){
- $.extend({
- disableCopyPaste : function(elm){
- var $elm = $(elm),
- ctrlDown = false,
- ctrlKey = 17,
- cKey = 67,
- vKey = 86,
- xKey = 88;
- // 禁止右键
- elm.oncontextmenu = function(){
- return false;
- }
- // 按下ctrl键的时候做个标记
- $elm.keydown(function(e){
- if (e.keyCode == ctrlKey){
- ctrlDown = true;
- }
- }).keyup(function(e){
- if (e.keyCode == ctrlKey){
- ctrlDown = false;
- }
- });
- // 按ctrl的同时又按c || v || x
- $elm.keydown(function(e){
- if (ctrlDown && (e.keyCode == cKey || e.keyCode == vKey || e.keyCode == xKey)){
- return false;
- }
- });
- }
- });
- })(jQuery);
调用方法:
- $.disableCopyPaste(document);
jQuery用的多了现在写JS的时候动不动就想着用jQuery的方法,唉,这样不好啊,能不用就不用吧。
于是在这个功能完成上线之后趁着有空另外写了一个。
- function disableCopyPaste(elm) {
- elm.oncontextmenu = function() {
- return false;
- }
- elm.onkeydown = interceptKeys;
- }
- function interceptKeys(evt) {
- var evt = evt || window.event,
- c = evt.keyCode,
- ctrlDown = evt.ctrlKey;
- if (ctrlDown && c===67) { // c
- return false;
- } else if (ctrlDown && c===86) { // v
- return false;
- } else if (ctrlDown && c===88) { // x
- return false;
- } else {
- return true;
- }
- }
- disableCopyPaste(document);
这个调用方法就不用写了吧,哈哈~
总结一下,想象中浏览器功能性的兼容性并没有出现,但是功能却并没有很好的完成,BUG无数啊:
- 功能靠JS实现,禁用掉JS或者host绑在本地调用自己的代码肯定没有影响(废话);
- 选好内容往输入框里拖是可以的,主流的浏览器竟然都可以的,IE6就没测了,再可以就太伤心了,上午搞了一下也没能找到屏蔽这个的方法 -_-!
- 另外浏览器自带的功能,比如在firefox下,选好内容,然后 主菜单 -> 编辑 -> 里面就有各种粘贴复制功能,还有firebug等各种调试工具。。。
- 还有其他的键盘布局、其他操作系统下的ctrlKey和各种按键keycode是不是一样呢。。。
- 最后一句,已经显示在页面上的东西真的想要复制出去怎么会没有办法呢?反而给我们的日常工作带来很多麻烦,何必呢?
坐个沙发,这个功能很不厚道啊
沙发抢一个!
css3 user-select: none; 也可以防止复制,不过这个防止复制功能很鸡肋,人家有N种办法来把文字或图片给下载下来。