前端er怎样操做剪切复制以及禁止复制+破解等

时间  2019-11-05
标签 前端 怎样 剪切 复制 以及 禁止 破解 繁體版
原文   原文链接

前言

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

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

我的博客了解一下：obkoro1.com前端

目录：

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

API介绍:

复制、剪切、粘贴事件：

  1. copy 发生复制操做时触发;
  2. cut 发生剪切操做时触发;
  3. paste 发生粘贴操做时触发;
  4. 每一个事件都有一个before事件对应：beforecopy、beforecut、beforepaste;

这几个before通常不怎么用，因此咱们把注意力放在另外三个事件就能够了。git

触发条件:github

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

  2. 使用了相应的键盘组合键，好比:command+c、command+v;浏览器

    就算你是随便按的，也会触发事件。高程中介绍在Chorme、Firefox和Safari中，这几个before事件只会在真实会发生剪贴板事件的状况下触发，IE上则能够触发before。我实际测试的时候最新版chorme也会乱按也会触发，因此限制应该是在早一点的版本上。安全

    so 想说的是：before这几个事件最好不要用,有关于剪切板的处理最好放在copy、cut、paste上面。dom

使用姿式：post

以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对象的属性，在Chrome、Safari和Firefox中，这个对象是相应的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这样就不用去访问e和e的方法了。
  • 示例中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中clipboardData是window的属性。

而其余浏览器则是相应的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在这里，能够点进去看看。

结语

工做之余了解一下这些东西仍是颇有趣的，也能够扩宽你的知识面。

事实上只要监听了这些事件，咱们就能够对要剪切的内容进行各类各样的操做，好比:复制的时候更换文本，粘贴的时候查找有没有图片(上传图片)，或者文本的长度进行剪切等等，惟一限制你的

但愿看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。

博客、前端积累文档、公众号、GitHub、wx:OBkoro一、邮箱：obkoro1@foxmail.com

以上2018.8.8

参考资料：

js高程 14.2.2操做剪贴板

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程