JavaScript複製內容到剪貼簿

axuebin發表於2018-02-27

JavaScript

原文連結：github.com/axuebin/art…

最近一個活動頁面中有一個小需求，使用者點選或者長按就可以複製內容到剪貼簿，記錄一下實現過程和遇到的坑。

常見方法

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

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

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

clipboard.js

這是clipboard的官網：clipboardjs.com/，看起來就是這麼的簡單。

引用

直接引用： <script src="dist/clipboard.min.js"></script>

包： npm install clipboard --save ，然後 import Clipboard from 'clipboard';

使用

從輸入框複製

現在頁面上有一個 <input> 標籤，我們需要複製其中的內容，我們可以這樣做：

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">點我複製</button>
複製程式碼

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
複製程式碼

注意到，在 <button> 標籤中新增了一個 data-clipboard-target 屬性，它的值是需要複製的 <input> 的 id，顧名思義是從整個標籤中複製內容。

直接複製

有的時候，我們並不希望從 <input> 中複製內容，僅僅是直接從變數中取值。如果在 Vue 中我們可以這樣做：

<button class="btn" :data-clipboard-text="copyValue">點我複製</button>
複製程式碼

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';
複製程式碼

事件

有的時候我們需要在複製後做一些事情，這時候就需要回撥函式的支援。

在處理函式中加入以下程式碼：

// 複製成功後執行的回撥函式
clipboard.on('success', function(e) {
    console.info('Action:', e.action); // 動作名稱，比如：Action: copy
    console.info('Text:', e.text); // 內容，比如：Text：hello word
    console.info('Trigger:', e.trigger); // 觸發元素：比如：<button class="btn" :data-clipboard-text="copyValue">點我複製</button>
    e.clearSelection(); // 清除選中內容
});

// 複製失敗後執行的回撥函式
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
複製程式碼

小結

文件中還提到，如果在單頁面中使用 clipboard ，為了使得生命週期管理更加的優雅，在使用完之後記得 btn.destroy() 銷燬一下。

clipboard 使用起來是不是很簡單。但是，就為了一個 copy 功能就使用額外的第三方庫是不是不夠優雅，這時候該怎麼辦？那就用原生方法實現唄。

document.execCommand()方法

先看看這個方法在 MDN 上是怎麼定義的：

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

意思就是可以允許執行命令來操作可編輯區域的內容，注意，是可編輯區域。

定義

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

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

aCommandName ：表示命令名稱，比如： copy, cut 等（更多命令見命令）；
aShowDefaultUI：是否展示使用者介面，一般情況下都是 false；
aValueArgument：有些命令需要額外的引數，一般用不到；

相容性

這個方法在之前的相容性其實是不太好的，但是好在現在已經基本相容所有主流瀏覽器了，在移動端也可以使用。

使用

從輸入框複製

現在頁面上有一個 <input> 標籤，我們想要複製其中的內容，我們可以這樣做：

<input id="demoInput" value="hello world">
<button id="btn">點我複製</button>
複製程式碼

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('複製成功');
	}
})
複製程式碼

其它地方複製

有的時候頁面上並沒有 <input> 標籤，我們可能需要從一個 <div> 中複製內容，或者直接複製變數。

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

這時候我們需要曲線救國。

<button id="btn">點我複製</button>
複製程式碼

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
	document.body.appendChild(input);
 	input.setAttribute('value', '聽說你想複製我');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('複製成功');
	}
    document.body.removeChild(input);
})
複製程式碼

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

遇到的坑

在Chrome下除錯的時候，這個方法時完美執行的。然後到了移動端除錯的時候，坑就出來了。

對，沒錯，就是你，ios。。。

點選複製時螢幕下方會出現白屏抖動，仔細看是拉起鍵盤又瞬間收起

知道了抖動是由於什麼產生的就比較好解決了。既然是拉起鍵盤，那就是聚焦到了輸入域，那隻要讓輸入域不可輸入就好了，在程式碼中新增 input.setAttribute('readonly', 'readonly'); 使這個 <input> 是隻讀的，就不會拉起鍵盤了。
無法複製

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

完整程式碼如下：

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('複製成功');
	}
    document.body.removeChild(input);
})
複製程式碼