看到這篇文章想要轉(zhuǎn)載的原因是，之前想做一個(gè)Chrome插件，實(shí)現(xiàn)功能是特定網(wǎng)站監(jiān)聽用戶復(fù)制，然后自動(dòng)綴上磁力鏈接頭

是的，這玩意的作用就是你現(xiàn)在所想的那樣。只是鑒于之前一直沒搞定讀寫Windows剪切板的功能，其實(shí)用第三方插件clipboard.js就能辦到

原文鏈接：JavaScript復(fù)制內(nèi)容到剪貼板

常見方法

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

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

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

clipboard.js

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

引用

直接引用：?<script src="dist/clipboard.min.js"></script>包：?npm install clipboard --save?，然后?import Clipboard from 'clipboard';

使用

從輸入框復(fù)制

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

1 2	< input id = "demoInput" value = "hello world" > < button class = "btn" data - clipboard - target = "#demoInput" >點(diǎn)我復(fù)制 < / button >

1 2	import Clipboard from 'clipboard' ; const btnCopy = new Clipboard ( 'btn' ) ;

注意到，在?<button>標(biāo)簽中添加了一個(gè)?data-clipboard-target?屬性，它的值是需要復(fù)制的 <input>的?id，顧名思義是從整個(gè)標(biāo)簽中復(fù)制內(nèi)容。

直接復(fù)制

有的時(shí)候，我們并不希望從 <input>中復(fù)制內(nèi)容，僅僅是直接從變量中取值。如果在?Vue?中我們可以這樣做：

1	< button class = "btn" : data - clipboard - text = "copyValue" >點(diǎn)我復(fù)制 < / button >

1 2 3

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

事件

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13

// 復(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?使用起來是不是很簡單。但是，就為了一個(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è) <input>標(biāo)簽，我們想要復(fù)制其中的內(nèi)容，我們可以這樣做：

1 2	< input id = "demoInput" value = "hello world" > < button id = "btn" >點(diǎn)我復(fù)制 < / button >

1 2 3 4 5 6 7 8 9

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í)候頁面上并沒有 <input>標(biāo)簽，我們可能需要從一個(gè)<div>中復(fù)制內(nèi)容，或者直接復(fù)制變量。還記得在?execCommand()?方法的定義中提到，它只能操作可編輯區(qū)域，也就是意味著除了 <input>,<textarea>這樣的輸入域以外，是無法使用這個(gè)方法的。

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

1	< button id = "btn" >點(diǎn)我復(fù)制 < / button >

1 2 3 4 5 6 7 8 9 10 11 12

const btn = document . querySelector ( '#btn' ) ; btn . addEventListener ( 'click' , ( ) = > { const input = document . createElement ( 'input' ) ; document . body . appendChild ( input ) ; input . setAttribute ( 'value' , '聽說你想復(fù)制我' ) ; input . select ( ) ; if ( document . execCommand ( 'copy' ) ) { document . execCommand ( 'copy' ) ; console . log ( '復(fù)制成功' ) ; } ???? document . body . removeChild ( input ) ; } )

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

遇到的坑

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

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

點(diǎn)擊復(fù)制時(shí)屏幕下方會(huì)出現(xiàn)白屏抖動(dòng)，仔細(xì)看是拉起鍵盤又瞬間收起知道了抖動(dòng)是由于什么產(chǎn)生的就比較好解決了。既然是拉起鍵盤，那就是聚焦到了輸入域，那只要讓輸入域不可輸入就好了，在代碼中添加?input.setAttribute('readonly', 'readonly');?使這個(gè) <input>是只讀的，就不會(huì)拉起鍵盤了。

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

完整代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

const btn = document . querySelector ( '#btn' ) ; btn . addEventListener ( 'click' , ( ) = > { const input = document . createElement ( 'input' ) ; ???? input . setAttribute ( 'readonly' , 'readonly' ) ; ???? input . setAttribute ( 'value' , 'hello world' ) ; ???? document . body . appendChild ( input ) ; input . setSelectionRange ( 0 , 9999 ) ; if ( document . execCommand ( 'copy' ) ) { document . execCommand ( 'copy' ) ; console . log ( '復(fù)制成功' ) ; } ???? document . body . removeChild ( input ) ; } )

總結(jié)

以上是生活随笔為你收集整理的【战术性mark】JS 复制内容到剪贴板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。