想實做出,點擊按鈕,複製文字的功能。

fiddle.js 看效果 (連結)

程式碼

HTML

<div id="textToCopy">這是要複製的文本內容。</div>
<button id="copyButton">複製文本</button>

// JS
const copyButton = document.getElementById('copyButton');
const textToCopy = document.getElementById('textToCopy');

copyButton.addEventListener('click', () => {
const range = document.createRange(); // 建立物件
range.selectNode(textToCopy); // 設定範圍在指定節點
window.getSelection().removeAllRanges(); // 清除當前的選擇
window.getSelection().addRange(range); // 選擇文本

try {
const successful = document.execCommand('copy'); // 複製文本
const msg = successful ? '已複製到剪貼簿!' : '複製失敗!';
alert(msg);
} catch (err) {
console.error('複製失敗', err);
}

window.getSelection().removeAllRanges(); // 清除選擇
});

HTML + JS

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>複製DIV文字</title>
</head>

<body>

  <div id="textToCopy">這是要複製的文本內容。</div>
  <button id="copyButton">複製文本</button>

  <script>
    const copyButton = document.getElementById('copyButton');
    const textToCopy = document.getElementById('textToCopy');

    copyButton.addEventListener('click', () => {
      const range = document.createRange(); // 建立物件
      range.selectNode(textToCopy); // 設定範圍在指定節點
      window.getSelection().removeAllRanges(); // 清除當前的選擇
      window.getSelection().addRange(range); // 選擇文本

      try {
        const successful = document.execCommand('copy'); // 複製文本
        const msg = successful ? '已複製到剪貼簿!' : '複製失敗!';
        alert(msg);
      } catch (err) {
        console.error('複製失敗', err);
      }

      window.getSelection().removeAllRanges(); // 清除選擇
    });
  </script>

</body>

</html>

這兩行程式碼的用途是建立一個選擇範圍,用在選取指定的 DOM 節點的內容(在這裡是指 textToCopy),以利進行「複製」。

  1. const range = document.createRange();
    • 建立一個新的 Range 物件。Range 是一個文本中一段連續內容的物件,可以用來操作選擇的文本。
  2. range.selectNode(textToCopy);
    • 將建立的範圍設定為選擇整個 textToCopy 節點的內容。這表示 range 現在包括了 textToCopy 節點內的所有文本,並準備被選取。

Can I use

目前有支援這個語法的瀏覽器版本。

不過 MDN 文件不推薦使用此功能 ,詳下列與連結說明。

Document.execCommand() 

已棄用: 不推薦使用此功能。雖可能有一些瀏覽器仍然支援它,但也許已自相關的網頁標準中移除、正準備移除、或僅為了維持相容性而保留。避免使用此功能,盡可能更新現有程式;請參考頁面底部的相容性表格來下決定。請注意:本功能可能隨時停止運作。

可能要改用 Clipboard API 來實作複製文字的功能了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *