JavaScript怎么實現一鍵復制文本功能

這篇文章主要介紹了JavaScript怎么實現一鍵復制文本功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript怎么實現一鍵復制文本功能文章都會有所收獲，下面我們一起來看看吧。

一、navigator.clipboard 對象

1. navigator.clipboard 方法匯總

2. 代碼示例

方法 1: Clipboard.writeText(), 用于將文本內容寫入剪貼板；

    document.body.addEventListener("click", async (e) => {
      await navigator.clipboard.writeText("Yo");
    });

方法 2: Clipboard.write(), 用于將文本數據/二進制數據寫入剪貼板

Clipboard.write()不僅在剪貼板可寫入普通text，還可以寫入圖片數據（Chrome瀏覽器僅支持png格式）。

 async function copy() {
   const image = await fetch("kitten.png");
   const text = new Blob(["Cute sleeping kitten"], { type: "text/plain" });
   const item = new ClipboardItem({
     "text/plain": text,
     "image/png": image,
   });
   await navigator.clipboard.write([item]);
 }

3. 優缺點

① 優點

所有操作都是異步的，返回 Promise 對象，不會造成頁面卡頓;

無需提前選中內容，可以將任意內容（比如圖片）放入剪貼板；

② 缺點: 允許腳本任意讀取會產生安全風險，安全限制較多。

Chrome 瀏覽器規定，只有 HTTPS 協議的頁面才能使用這個 API;

調用時需要明確獲得用戶的許可。

二、document.execCommand() 方法

1. document.execCommand() 方法匯總

2. 代碼示例

document.execCommand('copy')，用于將已選中的文本內容寫入剪貼板。

結合 window.getSelection()方法實現一鍵復制功能：

    const TestCopyBox = () => {
    const onClick = async () => {
    const divElement = document.getElementById("select-div");
    if (window.getSelection) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(divElement);
    selection.removeAllRanges();
    selection.addRange(range);
    }
    document.execCommand("copy");
    };
    return <div>
     <button onClick={onClick}>copy</button>
     <div id="select-div"> <input /> <span>test2: 3</span><span>test3: 94</span></div>
    </div>
    };

3. 優缺點

① 優點

使用方便;

各種瀏覽器都支持；

② 缺點

只能將選中的內容復制到剪貼板;

同步操作，如果復制/粘貼大量數據，頁面會出現卡頓。

關于“JavaScript怎么實現一鍵復制文本功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript怎么實現一鍵復制文本功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。