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

常見方法

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

第三方庫：clipboard.js
原生方法：document.execCommand()

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

clipboard.js

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

原生方法

document.execCommand()方法

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

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

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

定義

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

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

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

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

兼容性

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

使用

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

js代碼

其它地方復(fù)制

有的時(shí)候頁面上并沒有?<input>?標(biāo)簽，我們可能需要從一個(gè)?<div>?中復(fù)制內(nèi)容，或者直接復(fù)制變量。

還記得在?execCommand()?方法的定義中提到，它只能操作可編輯區(qū)域，也就是意味著除了 <input>、<textarea> 這樣的輸入域以外，是無法使用這個(gè)方法的。

這時(shí)候我們需要曲線救國。

js代碼

算是曲線救國成功了吧。在使用這個(gè)方法時(shí)，遇到了幾個(gè)坑。

遇到的坑

在Chrome下調(diào)試的時(shí)候，這個(gè)方法時(shí)完美運(yùn)行的。然后到了移動(dòng)端調(diào)試的時(shí)候，坑就出來了。

對(duì)，沒錯(cuò)，就是你，ios。。。

1、點(diǎn)擊復(fù)制時(shí)屏幕下方會(huì)出現(xiàn)白屏抖動(dòng)，仔細(xì)看是拉起鍵盤又瞬間收起

知道了抖動(dòng)是由于什么產(chǎn)生的就比較好解決了。既然是拉起鍵盤，那就是聚焦到了輸入域，那只要讓輸入域不可輸入就好了，在代碼中添加 input.setAttribute('readonly', 'readonly'); 使這個(gè) <input> 是只讀的，就不會(huì)拉起鍵盤了。

2、無法復(fù)制

這個(gè)問題是由于 input.select() 在ios下并沒有選中全部內(nèi)容，我們需要使用另一個(gè)方法來選中內(nèi)容，這個(gè)方法就是 input.setSelectionRange(0, input.value.length);。

完整代碼如下：

總結(jié)

以上就是關(guān)于JavaScript如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板，附上幾個(gè)鏈接：