9行程式碼實現複製內容至剪下板

ma125120發表於2019-03-02
行程

Demo: ma125120.github.io/ma-dom/test…

本方法主要使用了 Range 物件和HTML5的Selection API，經過測試，本方法在主流瀏覽器如谷歌瀏覽器、火狐瀏覽器、360安全瀏覽器、搜狗高速瀏覽器中均執行良好。

先附上大家最想看的程式碼：

function copy(el) {
	var range = document.createRange();
	var end = el.childNodes.length;
	range.setStart(el,0);
	range.setEnd(el,end);

	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand("copy",false,null);
	selection.removeRange(range);
}
複製程式碼

實現步驟

  1. 首先是利用**document.createRange()**建立一個 Range 物件 ,然後獲取所需複製元素的子元素的長度大小，然後呼叫Range物件的setStart和setEnd方法設定選擇區域的大小。
  2. 此時只是設定了選擇區域的大小，實際上在window中並沒有真正選中，所以還需要呼叫window.getSelection()生成一個 Selection 物件，在新增選區之前最好先呼叫selection.removeAllRanges()清除其他的選區，否則瀏覽器可能會發出下面的警告，然後再呼叫 Selection 物件的addRange方法，將上一步的 range 作為引數傳入，即可將所需複製的元素真正設定為被選擇區域。
  3. 現在就可以像平時選中文字後呼叫document.execCommand來實現將被選擇區域的文字複製到剪貼簿。
  4. 最後還需要呼叫 Selection 物件的removeRange方法將 Range 物件移除，保證被選擇區域永遠只有一個被選擇的元素，否則某些瀏覽器在下次可能會因為有兩個被選擇元素而發出警告或者報錯。

注意

—

呼叫該功能時，必須是在點選按鈕後或者是點選 帶有user-select: none屬性的元素，否則瀏覽器可能會發出這樣的警告：[Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See https://www.chromestatus.com/features/6680566019653632 for more details.

不想複製程式碼的，我已經把該功能釋出到npm,直接使用 npm i ma-dom --save-dev，然後引入 import { copy } from `ma-dom` 即可直接呼叫該方法。

最後附上github地址：github.com/ma125120/ma…。

如有任何問題，歡迎在下方評論區提出意見。

相關文章