js 實現頁面點擊按鈕復制內容

前言：

我們平時在頁面中是按照長按來實現復制相關的內容，那么怎么用js實現點擊按鈕實現復制相關的內容呢？請看如下方法：

實現步驟：

1、引入相關的js（ClipboardJS插件）

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/clipboard.js/1.6.1/clipboard.min.js"></script>

2、html布局

<p class="state" id="mykeyPassword"> 這里是需要復制的內容 </p>
<span class="copyWord" id="copyButton" data-clipboard-action="copy" data-clipboard-target="#mykeyPassword" style="cursor: pointer" onclick=""> 點擊復制內容 </span>

注意：點擊按鈕的data-clipboard-target 屬性值一定要與被復制標簽的id保持一致

3、js的具體實現

var clipboard = new ClipboardJS('#copyButton');
clipboard.on('success', function (e) {
         //復制成功
});
clipboard.on('error', function (e) {
         console.log("復制失敗,請重試");
});
備注：這里默認監聽點擊復制事件         

注意：

1、需要給span 加上cursor:pointer 這個屬性，否則在ios13以下的系統無法實現復制效果！

2、同時加上onclick='' ''