如果有这样的需求:点击一个按钮,复制某个文本的文字到剪贴板以供使用,我们就需要用到一些方法。
在pc上我们复制文本可以使用

document.execCommand('copy');

但是在移动端是不行的。我选用的方案是clipboard,实测效果完美。

在clipboard官网 https://clipboardjs.com 上,有详细的安装使用方法:
我们可以使用npm包,也可以使用cdn。地址:https://github.com/zenorocha/...

我以cnd举例:

<body>
    <text class="summary_context">这是我们想要复制的文字<text>
    <a href="javascript:;" class="copy_click" data-clipboard-text="123">复制文案</a>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script>
    const $copyClick = $('.copy_click');
    const $summaryContext = $('.summary_context')
    $copyClick.addEventListener('touchstart', function() {
        let text = $summaryContext.innerText;
        $copyClick.setAttribute('data-clipboard-text', text);
        let clipboard = new ClipboardJS('.copy_click');
        clipboard.on('success', function(e) {
            alert('复制成功')
        });
        clipboard.on('error', function(e) {
            alert('复制失败')
        });
    })
    function $(param){
        return document.querySelector(param)
    }
</script>
<style>
    .summary_context{
        text-decoration:none;
        border:0;
    }
</style>

不会飞的Porco
125 声望5 粉丝

segmentAnt