copy API

使用原生html5 API复制

/**
 * HTML5 提供了复制功能的如下API：
 * document.createRange(): 创建选中容器，返回一个 range Object，支持移动端和 PC 端。
 * selectNode(DOM): 返回 range Object 上挂载的方法，用来添加选中元素，只能添加一个。
 * window.getSelection()：用来获得当前选中的元素的内容。一般而言就是用鼠标选中页面上的内容。
 * addRange(range): 这个方法是挂载到 getSelection()方法下的，用来执行元素的选中。
 */

(function () {
    document.body.addEventListener('click', function () {
        // #content为要复制的元素
        const copyDom = document.querySelector('#content');
        // 创建选中范围
        const range = document.createRange();
        range.selectNode(copyDom);
        // 移除剪切板中内容
        window.getSelection().removeAllRanges();
        // 添加新的内容到剪切板
        window.getSelection().addRange(range);
        // 复制
        const successful = document.execCommand('copy');

        try {
            const msg = successful ? "successful" : "failed";
            alert('Copy command was : ' + msg);
        } catch (err) {
            alert('Oops , unable to copy!');
        }
    })
})()

使用input选中元素

<input type="text" id="input" value="17373383"> <br>
<button type="button" id="button">复制输入框中内容</button>
<script>
    (function(){
        button.addEventListener('click', function(){
            input.select();
            document.execCommand('copy');
            alert('复制成功');
        })
    })()
</script>

使用clipBoard插件

// https://clipboardjs.com/

// 例如, 你希望动态设置target, 你需要返回一个node节点.
new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

// 如果你希望动态设置text, 你需要返回字符串。
new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});