成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript復(fù)制內(nèi)容到剪貼板

ideaa / 1473人閱讀

摘要：原文鏈接最近一個(gè)活動(dòng)頁面中有一個(gè)小需求，用戶點(diǎn)擊或者長(zhǎng)按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過程和遇到的坑。完整代碼如下復(fù)制成功總結(jié)以上就是關(guān)于如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板，附上幾個(gè)鏈接兼容性

原文鏈接：https://github.com/axuebin/ar...

最近一個(gè)活動(dòng)頁面中有一個(gè)小需求，用戶點(diǎn)擊或者長(zhǎng)按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過程和遇到的坑。

常見方法

查了一下萬能的Google，現(xiàn)在常見的方法主要是以下兩種：

第三方庫：clipboard.js

原生方法：document.execCommand()

分別來看看這兩種方法是如何使用的。

clipboard.js

這是clipboard的官網(wǎng)：https://clipboardjs.com/，看起來就是這么的簡(jiǎn)單。

引用

直接引用：

包： npm install clipboard --save ，然后 import Clipboard from "clipboard";

使用 從輸入框復(fù)制

現(xiàn)在頁面上有一個(gè) 標(biāo)簽，我們需要復(fù)制其中的內(nèi)容，我們可以這樣做：



import Clipboard from "clipboard";
const btnCopy = new Clipboard("btn");

注意到，在 

import Clipboard from "clipboard";
const btnCopy = new Clipboard("btn");
this.copyValue = "hello world";
事件

有的時(shí)候我們需要在復(fù)制后做一些事情，這時(shí)候就需要回調(diào)函數(shù)的支持。

在處理函數(shù)中加入以下代碼：

// 復(fù)制成功后執(zhí)行的回調(diào)函數(shù)
clipboard.on("success", function(e) {
    console.info("Action:", e.action); // 動(dòng)作名稱，比如：Action: copy
    console.info("Text:", e.text); // 內(nèi)容，比如：Text：hello word
    console.info("Trigger:", e.trigger); // 觸發(fā)元素：比如：
    e.clearSelection(); // 清除選中內(nèi)容
});

// 復(fù)制失敗后執(zhí)行的回調(diào)函數(shù)
clipboard.on("error", function(e) {
    console.error("Action:", e.action);
    console.error("Trigger:", e.trigger);
});
小結(jié)

文檔中還提到，如果在單頁面中使用 clipboard ，為了使得生命周期管理更加的優(yōu)雅，在使用完之后記得 btn.destroy() 銷毀一下。

clipboard 使用起來是不是很簡(jiǎn)單。但是，就為了一個(gè) copy 功能就使用額外的第三方庫是不是不夠優(yōu)雅，這時(shí)候該怎么辦？那就用原生方法實(shí)現(xiàn)唄。

document.execCommand()方法

先看看這個(gè)方法在 MDN 上是怎么定義的：

which allows one to run commands to manipulate the contents of the editable region.

意思就是可以允許運(yùn)行命令來操作可編輯區(qū)域的內(nèi)容，注意，是可編輯區(qū)域。

定義 
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

方法返回一個(gè) Boolean 值，表示操作是否成功。

aCommandName ：表示命令名稱，比如： copy, cut 等（更多命令見命令）；

aShowDefaultUI：是否展示用戶界面，一般情況下都是 false；

aValueArgument：有些命令需要額外的參數(shù)，一般用不到；

兼容性

這個(gè)方法在之前的兼容性其實(shí)是不太好的，但是好在現(xiàn)在已經(jīng)基本兼容所有主流瀏覽器了，在移動(dòng)端也可以使用。

使用 從輸入框復(fù)制

現(xiàn)在頁面上有一個(gè) 標(biāo)簽，我們想要復(fù)制其中的內(nèi)容，我們可以這樣做：



const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
    const input = document.querySelector("#demoInput");
    input.select();
    if (document.execCommand("copy")) {
        document.execCommand("copy");
        console.log("復(fù)制成功");
    }
})
其它地方復(fù)制

有的時(shí)候頁面上并沒有 標(biāo)簽，我們可能需要從一個(gè)

中復(fù)制內(nèi)容，或者直接復(fù)制變量。

還記得在 execCommand() 方法的定義中提到，它只能操作可編輯區(qū)域，也就是意味著除了 、