前言

有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。

我也经常遇到这些场景,有时候会去想这后面到底是怎么做,周末趁着有空去研究了一下,然后发现这些都跟操作剪贴板有关系,并且都不难,了解一下基本都知道怎么做了,整理分享一波给大家。

个人博客了解一下:obkoro1.com


目录:

  • API介绍
  • 实现类知乎/掘金复制大段文本添加版权信息
  • 实现类起点网的防复制功能
  • 破解防复制
  • 点击复制功能

API介绍:

复制、剪切、粘贴事件:

  1. copy 发生复制操作时触发;
  2. cut 发生剪切操作时触发;
  3. paste 发生粘贴操作时触发;
  4. 每个事件都有一个before事件对应:beforecopybeforecutbeforepaste;

这几个before一般不怎么用,所以我们把注意力放在另外三个事件就可以了。

触发条件:

  1. 鼠标右键菜单的复制粘贴剪切;

  2. 使用了相应的键盘组合键,比如:command+ccommand+v;

    就算你是随便按的,也会触发事件。高程中介绍在ChormeFirefoxSafari中,这几个before事件只会在真实会发生剪贴板事件的情况下触发,IE上则可以触发before。我实际测试的时候最新版chorme也会乱按也会触发,所以限制应该是在早一点的版本上。

    so 想说的是:before这几个事件最好不要用,有关于剪切板的处理最好放在copycutpaste上面。

使用姿势:

以copy为例:

    document.body.oncopy = e => {
// 监听全局复制 做点什么
}
// 还有这种写法:
document.addEventListener("copy", e => {
// 监听全局复制 做点什么
});

上面是在document.body上全局监听的,然而很多人不知道的是,我们还可以为某些dom单独添加剪切板事件:

    // html结构
<div id="test1"></div>
<div id="test2"></div>
// 写法一样:
let test1 = document.querySelector('#test1');
test1.oncopy = e => {
// 监听test1发生的复制事件 做点什么
// test1发生的复制事件会触发回调,其他地方不会触发回调
}

其他事件也是一样的,这里就不赘述了。

clipboardData对象:用于访问以及修改剪贴板中的数据

兼容:

不同浏览器,所属的对象不同:在IE中这个对象是window对象的属性,在ChromeSafariFirefox中,这个对象是相应的event对象的属性。所以我们在使用的时候,需要做一下如下兼容:

    document.body.oncopy = e => {
let clipboardData = (e.clipboardData || window.clipboardData);
// 获取clipboardData对象 + do something
}

对象方法:

对象有三个方法: getData()setData()clearData()

  • getData() 访问剪切板中的数据

    参数: getData()接受一个'text'参数,即要取得的数据的格式。

    在复制、剪切、粘贴触发的事件的数据:

    实际上在chorme上测试只有paste粘贴的时候才能用getData()访问到数据,用法如下:

    要粘贴的数据:

      document.body.onpaste = e => {
    let clipboardData = (e.clipboardData || window.clipboardData); // 兼容处理
    console.log('要粘贴的数据', clipboardData.getData('text'));
    }

    被复制/剪切的数据:

    在复制和剪切中的数据,需要通过window.getSelection(0).toString()来访问:

      document.body.oncopy = e => {
    console.log('被复制的数据:', window.getSelection(0).toString());
    }
  • setData(): 修改剪切板中的数据

    参数:第一个参数也是'text',第二个参数是要放在剪切板中的文本。

    剩下的留在下面仿知乎/掘金复制大段文本添加版权信息那里再说。

  • clearData() :

    这个方法就不太知道了,试了好久不知道怎么用(如果有大佬知道,可以在评论区指点一下)。

    如果只是为了禁止复制,或者禁止粘贴,在下面还有另外的方法可以做到,并且可以细粒化操作。


应用:

如果学习不是为了装X,那么一切将毫无意义,来看这个东西可以在哪些场景使用:

实现类知乎/掘金复制大段文本添加版权信息:

实现很简单:取消默认复制之后,主要是在被复制的内容后面添加信息,然后根据clipboardData的setData()方法将信息写入剪贴板。

可以直接复制这段代码到本地去试试。

    // 掘金这里不是全局监听,应该只是监听文章的dom范围内。
document.body.oncopy = event => {
event.preventDefault(); // 取消默认的复制事件
let textFont, copyFont = window.getSelection(0).toString(); // 被复制的文字 等下插入
// 防知乎掘金 复制一两个字则不添加版权信息 超过一定长度的文字 就添加版权信息
if (copyFont.length > 10) {
textFont = copyFont + '\n'
+ '作者:OBKoro1\n'
+ '链接:https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'
+ '来源:掘金\n'
+ '著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。';
} else {
textFont = copyFont; // 没超过十个字 则采用被复制的内容。
}
if (event.clipboardData) {
return event.clipboardData.setData('text', textFont); // 将信息写入粘贴板
} else {
// 兼容IE
return window.clipboardData.setData("text", textFont);
}
}

然后command+c、command+v,输出:

你复制的内容
作者:OBKoro1
链接:https://juejin.im/user/58714f0eb123db4a2eb95372/posts
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

实现类起点网的防复制功能:

  • 禁止复制+剪切
  • 禁止右键,右键某些选项:全选,复制,粘贴等。
  • 禁用文字选择,能选择却不能复制,体验很差。
  • user-select 用css禁止选择文本。

可以把代码拷到本地玩一玩:

    // 禁止右键菜单
document.body.oncontextmenu = e => {
console.log(e, '右键');
return false;
// e.preventDefault();
};
// 禁止文字选择。
document.body.onselectstart = e => {
console.log(e, '文字选择');
return false;
// e.preventDefault();
};
// 禁止复制
document.body.oncopy = e => {
console.log(e, 'copy');
return false;
// e.preventDefault();
}
// 禁止剪切
document.body.oncut = e => {
console.log(e, 'cut');
return false;
// e.preventDefault();
};
// 禁止粘贴
document.body.onpaste = e => {
console.log(e, 'paste');
return false;
// e.preventDefault();
};
// css 禁止文本选择 这样不会触发js
body {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

PS:

  • 使用e.preventDefault()也可以禁用,但建议使用return false这样就不用去访问ee的方法了。
  • 示例中document.body全局都禁用了,也可以对dom(某些区域)进行禁用。

破解防复制

上面的防复制方法通过js+css实现的,所以思路就是:禁用js+取消user-select样式。

Chrome浏览器的话:打开浏览器控制台,按F1进入Setting,勾选Disable JavaScript(禁止js)。

此时如果还不能复制的话,就要去找user-select样式,取消这个样式就可以了。

所以那些盗版小说手打的,我真的不太能理解,Excuse me???

点击复制功能:

不能使用clipboardData:

在IE中可以用window.clipboardData.setData('text','内容')实现。

上文提到过,在IE中clipboardDatawindow的属性。

而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来实现这种操作。

具体做法:

  • 创建一个隐藏的input

  • 点击的时候,将要复制的内容放进input框中

  • 选择文本内容input.select()

    这里只能用input或者textarea才能选择文本。

  • document.execCommand("copy"),执行浏览器的复制命令。

     function copyText() {
    var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来
    var input = document.getElementById("input"); // 获取隐藏input的dom
    input.value = text; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    alert("复制成功");
    }

点击复制内容的demo在这里,可以点进去看看。


结语

工作之余了解一下这些东西还是很有趣的,也可以扩宽你的知识面。

事实上只要监听了这些事件,我们就可以对要剪切的内容进行各种各样的操作,比如:复制的时候更换文本,粘贴的时候查找有没有图片(上传图片),或者文本的长度进行剪切等等。

以上2018.8.8

参考资料:

js高程 14.2.2操作剪贴板

网页上如何实现禁止复制粘贴以及如何破解

原生 js 实现点击按钮复制文本

传播一个对开发者来说的好消息

  • 腾讯云年中最大活动,注册即领500减350卷!云服务器最低3折,最低375元/年!戳此直达活动现场!

  • 阿里云推行全民云计算计划,注册即领1000元代金卷,云服务器低至2折,最低293元/年!戳此直达活动


作者:OBKoro1
链接:https://juejin.im/post/5b66993ee51d451924734c35

前端er怎样操作剪切复制以及禁止复制+破解等的更多相关文章

  1. html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

    众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键 oncontextmenu="return false" 禁止 ...

  2. input禁止复制、粘贴、剪切

    <input type="text" autocomplete="off"> <!-- autocomplete="off" ...

  3. 网页禁止右键,禁止F12,禁止选中,禁止复制,禁止缓存等操作

    一.禁止右键 //方法一 document.onmousedown = function () { ) { return false; } } //方法二 document.oncontextmenu ...

  4. [JavaScript] 怎么使用JS禁止复制粘贴

    1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...

  5. 禁止页面复制功能 js禁止复制 禁用页面右键菜单

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script  t ...

  6. 如何禁止复制电脑文件到U盘、禁止U盘拷贝文件

    在公司局域网中,有时候我们处于保护电脑文件安全和商业机密的需要,会禁止局域网电脑使用U盘.禁用USB存储设备:或者禁止通过U盘复制电脑文件.禁止U盘拷贝公司电脑文件.那么,怎样实现呢?本文提供两种方法 ...

  7. boost实用工具:创建一个禁止复制的类 noncopyable

    boost的noncopyable允许创建一个禁止复制的类,使用很简单,但很好用!  C++ Code  12345678910111213141516171819202122232425262728 ...

  8. js禁止复制粘贴

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...

  9. vue禁止复制的方式

    普通网页禁止复制的功能这里不再叙述,自行学习 https://blog.csdn.net/qq_32963841/article/details/84656752 这里简单写一下vue中怎么禁止使用复 ...

随机推荐

  1. Windows系统下查看已共享的文件夹的方法

    电脑使用时间比较长,共享过好几次文件夹,现在想取消共享,但共享文件夹的路径隐藏得太深,要怎么样才能快速找到共享文件夹的实际路径呢?” “其实现在单位常见的方法都是用网上邻居的共享文件夹,共享的文件夹也 ...

  2. omnidazzle是mac的画笔工具

    先使用命令 brew cask install omnidazzle 试试,不行参考下面: http://macappstore.org/omnidazzle/

  3. 003 rip

    r0#config t Enter configuration commands, one per line.  End with CNTL/Z. r0(config)#router rip r0(c ...

  4. 【VBA研究】工作表自己主动筛选模式检測

    作者:iamlaosong 用VBA程序处理Excel数据文件.用户的数据文件有时处于自己主动筛选模式,往往导致数据处理不对.为此,须要检測工作表是否处于该模式,假设是,则去掉自己主动筛选.语句例如以 ...

  5. react 项目实战(二)创建 用户添加 页面 及 fetch请求 json-server db.json -w -p 8000

    1.安装 路由 npm install -S react-router@3.x 2.新增页面 我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...

  6. 理解C语言中指针的声明以及复杂声明的语法

    昨天刚把<C程序设计语言>中"指针与数组"章节读完,最终把心中的疑惑彻底解开了.如今记录下我对指针声明的理解.顺便说下怎样在C语言中创建复杂声明以及读懂复杂声明. 本文 ...

  7. Mariadb 事务

    事务 事务具有ACID特性:原子性(A,atomicity).一致性(C,consistency).隔离性(I,isolation).持久性(D,durabulity). 1.原子性:事务内的所有操作 ...

  8. 【智能家居篇】wifi网络结构(下)

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢. 因为WIFI网络具有移动性,同一时候WIFI以无线电波作为传输媒介,这样的媒介本质上是开放的,且easy被拦截,不论 ...

  9. LeetCode——Regular Expression Matching

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  10. mybtis 逆向

    mbg.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfi ...