Clipboard外掛是現在流行的實現複製功能的外掛之一，公司給了一個需求，要求能實現點選複製功能，於是乎就在這給大家分享一下經驗。外掛的下載以及使用百度搜索可以搜尋到，就不多說，直接上程式碼。

html部分，Clipboard功能很強大，它可以實現文字框內的複製貼上，也可以實現通過span標籤來獲取，以下我才用的是span標籤獲取。

<span  class="go" style="color: #009fff">Crazylonglonglong</span>

js部分，你可以使用cdn嵌入外掛，這個方法的好處在於不會佔用太多的伺服器空間，雖然這個外掛只有3kb多一點，個人喜好

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<script>
            var btn=document.getElementsByClassName('go');
            var clipboard=new Clipboard(btn);
            clipboard.on('success', function(e){
                alert("你已經複製成功");
                console.log(e);//這裡是你可以輸入的內容樣式
            });
            clipboard.on('error', function(e){
                alert("複製失敗");
                console.log(e);//這裡是你可以輸入的內容樣式
            });
		</script>
 

如果你想實現點選複製後跳轉其他頁面，類似微信之類的，只需要呼叫你所想要跳轉程式的介面便可

<script>
            var btn=document.getElementsByClassName('go');
            var clipboard=new Clipboard(btn);
            clipboard.on('success', function(e){
                alert("你已經複製成功");
                window.location.href = "weixin://"
                console.log(e);//這裡是你可以輸入的內容樣式
            });
            clipboard.on('error', function(e){
                alert("複製失敗");
                console.log(e);//這裡是你可以輸入的內容樣式
            });
		</script>
 

如上