---

tags:

• js
• ctrl+c

---

網頁內容複製貼上(三種方案 相容多種瀏覽器)

對網頁上的內容實現複製貼上的功能

痛點：需要支援多種不同的瀏覽器 主要有IE，Firefox

1. IE瀏覽器下的解決方案：
   window.clipboardData.setData("Text", text);
2. 通用瀏覽器的解決方案：
   選中元素之後執行：
   document.execCommand(`copy`)
3. Firefox下的解決方案
   兩種折中的方案
   a. 監聽hover事件 當滑鼠移動至需要複製的文字上時 使用者按下ctrl+c 實現複製
   b.window.prompt("Copy to clipboard: Ctrl+C, Enter", text); 彈出框內容為選中的文案，使用者按下ctrl+c 實現複製

整合之後的程式碼為

function copyToClipboard(text) {
  if (window.clipboardData) { // Internet Explorer
    window.clipboardData.setData("Text", text);
  } else {
    var textArea = document.createElement("textarea");
    textArea.style.background = `transparent`;
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      if (!document.execCommand(`copy`)) {
        copyToClipboardMozilla(text);
	  } else {
        showInfo("提示", "複製成功")
      }

    } catch (err) {
      console.log(`Oops, unable to copy`);
    }
      document.body.removeChild(textArea);
  }
}

function copyToClipboardMozilla(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

$(".copy").on("mouseenter", function () {
  $(this).css("background-color", "#c8c9c8");
  $(this).focus();
  var textArea = document.createElement("textarea");
  textArea.style.background = `transparent`;
  textArea.id = "copyContent";
  textArea.value = $(this).text();
  document.body.appendChild(textArea);
  textArea.select(); 
})

$(".copy").on("mouseleave", function () {
  $(this).css("background-color", "");
 document.body.removeChild(document.getElementById("copyContent")); 
})
複製程式碼

---

參考資料：

1. 幾個通用的解決複製的方法：
2. document.execCommand API
   W3C API
3. How do I copy to the clipboard in JavaScript?
4. How does Trello access the user`s clipboard?
5. 20 行 JS 程式碼，實現複製到剪貼簿功能

相容處理了瀏覽器的複製功能，有更好的方案解決歡迎留言聯絡
未經作者允許 請勿轉載，謝謝 ?