JS-复制功能的填坑之路

本来这只是我笔记本上的一个小小的code snippet,但是最近拿出来复用的时候不断发现新的坑,所以干脆写篇博客,以戒后人

最开始我使用的复制代码只有这么一点
坑:只能用于input和textarea,且不能元素不能被隐藏,且选中值为value属性

var copyDOM = $("#node"); //要复制文字的节点
copyText .select(); //选择
document.execCommand("Copy"); //执行复制

然后我发现在iphone下不起作用,所以在网上找了个这个

function copyText(text) {
    //创建节点
    var copyDOM = document.createElement('input');
    //要复制的字符串
    copyDOM.value = text;
    document.body.appendChild(copyDOM);
    //选择
    copyDOM.setSelectionRange(0, copyDOM.value.length); 
    copyDOM.focus();
    document.execCommand("Copy"); //复制
    copyDOM.style.display = 'none'; //隐藏创建的节点
    alert('复制成功！');
}

然后发现在ios10及以上会发生难以忍受的卡顿,随后查阅了大量的资料,无获

const el = document.createElement('input');
const btn = document.getElementById('btn');
el.value = '待复制文本';
el.style.opacity = '0';
document.body.appendChild(el);
const editable = el.contentEditable;
const readOnly = el.readOnly;
el.contentEditable = true;
el.readOnly = false;
const range = document.createRange();
range.selectNodeContents(el);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
const ret = document.execCommand('copy');
el.blur();
btn.text = ret ? '已复制' : '复制失败';

最后发现ios10卡顿的原因就是因为代码里创建的节点,遂改

    function copyText(aim) {
        var copyDOM = document.getElementById(aim);
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
            //这段代码必须放在前面否则无效
            window.getSelection().removeAllRanges();
            //要复制文字的节点
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(copyDOM);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            document.execCommand('copy');
            // 移除选中的元素
            window.getSelection().removeAllRanges();
        } else {
            copyDOM.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
        }
        alert("复制成功")
    }

后仍觉不满(因为充斥着大量本猫看不懂的函数),再改

function copyText(aim) {
    var copyDOM = document.getElementById(aim);
    // copyDOM.value='want to cope string'; //如果你想要直接复制字符串
    copyDOM.setSelectionRange(0, copyDOM.value.length);
    copyDOM.focus();
    document.execCommand("Copy");
    alert('复制成功！');
}

顿时心情舒畅,今后再遇此种需求,可随手解之
ps:以上函数仅用于input元素

2019.11.04
本猫更新了一个通用的可用于各类元素的函数在github,下载即可使用
https://github.com/DullCat-c/Dull_Copy