浏览器与APP复制/剪切后粘板板内容设置—复制内容加版权

浏览器复制与剪切网页文字内容，然后手动设置浏览器粘贴板内容，比如加上版权信息等。如何操作呢？

网上一些文档介绍的方法：

window.clipboardData.setData("Text",clipBoardContent+coyRightStr);

此方法兼容性并不好。就如同CSS3跑马灯文字，marquee，chrome36就移除了，鉴于神州的某度，也是找不到几篇合适的文章。

手工实现改造粘贴板内容

其原理就是向文本插入一个textarea 文本框，把选择内容填入文本框，然后设置选中。show code 如下：

// 用户复制与剪切，版权提示
window.addEventListener('copy',function () {
    showCopyTips()
});
window.addEventListener('cut',function () {
    showCopyTips()
});
var setClipboardData = (function setClipboardData () {
    let input = document.getElementById('zljCopy');
    if (!input) {
        input = document.createElement('textarea');
        input.className = 'hide';
        document.body.append(input)
    }
    var isExecSetclipboard = true;
    var locationHref = document.location.href;
    var appendLink = "\r\n\r\n原文出自：<a href='https://www.zhoulujun.cn/'>周陆军个人博客：https://www.zhoulujun.cn</a>， 转载请保留原文链接: <a href='" + locationHref + "'>" + locationHref + "</a>";
    if (!window.clipboardData) {
        isExecSetclipboard = false;
        appendLink = "\r\n\r\n原文出自周陆军个人博客:https://www.zhoulujun.cn/ \r\n转载请保留原文链接: " + locationHref;
    }
    return function (str) {
        if (isExecSetclipboard) {
            window.clipboardData.setData("text", str + appendLink);
        } else {
            input.value = str + appendLink;
            // $(input).select();
            $(input).trigger('select');
        }
    };
})();
function showCopyTips () {
    var str = window.getSelection ? window.getSelection().toString() : '';
    setClipboardData(str||'');
    if (window.sessionStorage && window.sessionStorage.getItem('confirmCopy') === 'Y') {
        return false;
    }
    if (str.length > 30) {
        if (confirm('复制成功！撰文不易，请保留原文及原文内相应的引用链接，谢谢！')) {
            window.sessionStorage && window.sessionStorage.setItem('confirmCopy', 'Y');
        } else {
            setClipboardData("");
        }
    }
}

这个方法，各种浏览器兼容都没有问题

APP控制粘贴板内容

如果是APP，我们直接在APP中控制粘贴板是更好

Android-写入剪贴板： 

function copyToClip(){
    var Context = plus.android.importClass("android.content.Context");
    var main = plus.android.runtimeMainActivity();
    var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
    return plus.android.invoke(clip,"getText");
}

Android-读取剪贴板

function copyToClip(){
    var Context = plus.android.importClass("android.content.Context");
    var main = plus.android.runtimeMainActivity();
    var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
    plus.android.invoke(clip,"setText","I'm copy from Native.js");
}

iOS-读取并设置剪贴板内容

var UIPasteboard  = plus.ios.importClass("UIPasteboard");
var generalPasteboard = UIPasteboard.generalPasteboard();
// 设置/获取文本内容:
generalPasteboard.setValueforPasteboardType("testValue", "public.utf8-plain-text");
var value = generalPasteboard.valueForPasteboardType("public.utf8-plain-text");

粘贴板第三方库推荐

https://www.npmjs.com/package/clipboard

https://www.npmjs.com/package/vue-clipboard2

https://www.npmjs.com/package/react-clipboard.js

参考文章：

复制/设置剪切板内容 （浏览器／nativejs） https://www.cnblogs.com/hanchongyang/p/7411144.html

转载本站文章《浏览器与APP复制/剪切后粘板板内容设置—复制内容加版权》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/web/2015_1016_314.html