移動端複製文字clipboard 以及針對iOS的處理

不會飛的Porco發表於2019-02-16
iOS

如果有這樣的需求：點選一個按鈕，複製某個文字的文字到剪貼簿以供使用，我們就需要用到一些方法。
在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>

相關文章