本文將學習如何通過 JavaScript 實現複製功能。

方法一:使用簡單的 JavaScript 代碼

我們可以使用 Clipboard API 的 Clipboard.writeText()Clipboard.write() 方法來用指定數據覆蓋剪貼板內容。

實例

function myFunction() {
  /* 獲取文本內容 */
  var copyText = document.getElementById("myInput");

  /* 選擇複製內容 */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* 為移動設備設置 */

   /* 複製內容到文本域 */
  navigator.clipboard.writeText(copyText.value);

  /* 彈出已複製的內容 */
  alert("複製的文本為: " + copyText.value);
}

嚐試一下 »

可以將複製完成後,使用更友好的方式來提示:

實例

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
 
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "複製內容: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "點擊按鈕複製";
}

嚐試一下 »

方法二:使用第三方庫 clipboard.js(推薦,兼容性強)

我們可以下載 clipboard.js 並引入項目:

<script src="dist/clipboard.min.js"></script>

當然,更簡單的是直接使用國內 CDN 庫:

<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>

實例

new ClipboardJS('#copyInput', {
    text: function(trigger) {
        return document.getElementById("myInput").value;
    }
}).on('success', function(e) {
   alert("複製成功!!!");
   e.clearSelection();
}).on('error', function(e) {
    alert('Error!');
});

嚐試一下 »

clipboard.js 瀏覽器支持