当前位置:秋叶网络博客 前端编程 ◊ JS全局复制粘贴板的精简兼容实现

JS全局复制粘贴板的精简兼容实现

作者:秋叶 发表时间:2018年10月15日

目前看到很多网站的复制功能都是阉割版,出现各种不能复制,这么大的bug难道网站管理员没发现吗?不是的,可能在他们浏览器是正常的,而在用户那里就有可能不正常,因为浏览器不同。说明他们的程序兼容性极差。但这个现象却非常普遍!因为网上大部分的教程都是阉割版!又或者是代码非常复杂难以应用。

开门见山,今天侃侃这篇文章实现复制粘贴板的优点:

1. 代码精简清晰条理性,易维护修改

2. 兼容性良好,基本兼容所有浏览器,有Chrome(谷歌)浏览器(43及以上),Firefox(火狐)浏览器(41及以上),IE浏览器(9及以上),Opera (29及以上), Safari (10及以上),可以理解为支持目前所有浏览器

3. 使用简单和自由,只需要指定需要复制的文本容器id或class,事件自己定义或者不通过事件也可以调用使用

4. 可以复制文本框的内容也可以复制其它网页任何地方的文字

5.支持跨区域复制,批量复制。

6.支持独立复制网页中不存在的文本(纯程序复制)。

6.支持svg文本的复制。

javascript代码:

window.copy = {
    /*JS全局复制粘贴板的精简兼容实现
    * by 秋叶博客 http://www.mizuiren.com/498.html
    * textContainer参数可以是选择器名称,也可以是文本
    * callback是复制后执行的回调处理,可选,默认会弹出复制成功信息
    */
    text: function(textContainer, callback) {
        var copyTextArea = document.querySelectorAll(textContainer); //要拷贝的文本容器
        var text = '';
        if(!copyTextArea.length) {
            text = textContainer;
        } else {
            for(var i = 0; i < copyTextArea.length; i++) {//把选择器所有的文本通过换行符拼接,取值区分输入框
                text += ((copyTextArea[i].nodeName === 'INPUT' || copyTextArea[i].nodeName === 'TEXTAREA') ? copy.HTMLEncode(copyTextArea[i].value) : copyTextArea[i].textContent) + '\n';
            }
        }
        this.div = document.createElement('pre');//创建临时容器,pre为了保证复制的内容带有格式,尤其是多段跨区域复制
        this.div.innerHTML = text;
        this.div.style.positon = 'absolute';
        this.div.style.left = '-99999999';//把临时容器偏移到无穷远处,absolute不妨碍网页原本的内容定位和视觉
        copyTextArea = this.div;
        document.body.appendChild(this.div);
        (copyTextArea.nodeName === 'INPUT' || copyTextArea.nodeName === 'TEXTAREA') ? copyTextArea.select(): copy.selectText(copyTextArea);

        copyTextArea.focus()

        try {
            var successful = document.execCommand('copy');
            if(!callback) {
                callback = function() {
                    alert("文字已复制到剪贴板中");
                };
            }
            if(successful) {
                callback();
            } else {
                copy.alertError();
            }
            if(this.div) {
                this.div.parentNode.removeChild(this.div);
            }
        } catch(err) {
            copy.alertError();
        }
    },
    HTMLEncode: function(html) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    },
    alertError: function() {
        alert("无法复制,请手动选择文本复制");
    },
    selectText: function(copyTextarea) {
        if(copyTextarea.hasAttribute('contenteditable')) {
            copyTextarea.focus();
        }
        if(document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(copyTextarea);
            range.select();
        } else if(window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();

            range.selectNodeContents(copyTextarea);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
};

使用教程:

需要注意的事,你的网页不能有copy这个对象,否则会被覆盖,引入前先检查。如重复,请把任意一个对象改名。
常规调用:

document.getElementById("button").onclick = function() {
    copy.text('#textarea');
}

或者(回调调用,复制后执行自定义程序):

document.getElementById("button").onclick = function() {
    copy.text('#textarea', function(){
        alert('复制成功啦!');
    });
}

或者(跨区域复制,批量复制):

copy.text('span');

或者(复制网页中不存在的文本(纯文本复制):

copy.text('把我这段文字放到剪贴板');

或者(复制svg文本):

copy.text('text');
目录: 前端编程 | 标签: | 1496次阅读