不能听命于自己者,就要受命于他人。网站首页学海无涯

通过JS实现复制内容自动追加上备注信息

陈佚2018-11-21 08:51:226人围观暂无分类
简介在简书,CSDN等平台上复制内容 粘贴后你会发现多了一些内容,文章链接转载信息!我觉得这个功能蛮实用蛮有趣的,心里有一些实现思路,但是在实现的路上却走得好艰难!

今天花了几个小时时间来实现这个功能,虽然有些艰难,但是还是学习到一些东西的。

一、clipboardData

首先来说一说clipboardData

这个js自带的对象还是非常强大的可以设置剪切板的内容,也可以获取剪切板的内容可以说非常强大了

window.clipboardData.setData("Text", txt);

window.clipboardData.getData("Text");

但是最致命的缺点就是它只支持ie浏览器,考虑安全性的原因其他的浏览器都将这项给移除掉了


二、ZeroClipboard

说到js复制插件,大部分人用的应该是ZeroClipboard了,但是ZeroClipboard插件有一个弊端,就是必须要用到一个flash文件,这无论是在插件的加载效率还是使用体验上,都是不够完美的。


三、clipboard.js

clipboard.js具有丰富强大的复制功能,除了复制input输入框里的文字之外,还可复制textarea里的文字,可复制某一个div里的文字。此外,还可以通过event事件返回任何文本复制到剪贴板里,也可以通过event事件复制任何标签(比如div)里的文字。

简单的来说也就定义一个触发器(DOM参数1),在定义一个内容区(DOM参数2)


以上三种终究还是不太符合我要实现的功能

我使用的还是js的copy事件document.execCommand("Copy");

具体的思路是这样的

  1. ctrl+c复制内容

  2. 创建一个textarea内容区(使用绝对定位到达隐藏的效果)

  3. 获取选中的内容

  4. 将选中的内容+备注信息填充到textarea内容区

  5. 选中textarea内容区中的内容

  6. 通过document.execCommand("Copy");复制内容

  7. 移除textarea内容区


下面附上代码

var copy=0;
// ctrl+c复制内容
$("body").bind("copy",function(){
    // 创建一个textarea内容区(使用绝对定位到达隐藏的效果)
    $('body').append('<textarea id="clipboard" style="position: fixed;top: -999px;left: -999px;"></textarea>');
    copy++;
    if (copy%2) {
        // 获取选中的内容(兼容)
        if(document.Selection){       
            var selectValue=document.selection.createRange().text;      
        }else{    
            var selectValue=window.getSelection().toString(); 
        }
        var notice=selectValue+"\n---------------------\n作者:陈佚\n来源:CSDN\n原文:https://www.abcdefgxyz.com\n版权声明:本文为博主原创文章,转载请附上博文链接!";
        // 将选中的内容+备注信息填充到textarea内容区
        $('#clipboard').html(notice);
        // 选中textarea内容区中的内容
        $('#clipboard').select();
        // 通过document.execCommand("Copy");复制内容
        document.execCommand("Copy");
        // 移除textarea内容区
        $('#clipboard').remove();
    };
});


但是实际上还是与简书,CSDN的实现方法不一致,相信还是有更好的方法。希望大家可以给我一点建议。

image.png

文章评论

    共有0条评论来说两句吧...