這篇文章將為大家詳細(xì)講解有關(guān)JS代碼如何實(shí)現(xiàn)粘貼板復(fù)制功能，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、九原網(wǎng)站維護(hù)、網(wǎng)站推廣。

使用剪貼板是一項基本技能。作為碼農(nóng)都應(yīng)知道， Tab , Ctrl/Cmd + A ， Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分別是自動聚焦、復(fù)制、粘貼的快捷鍵。

而對普通用戶可能就不太容易了。即使用戶知道剪貼板是什么，（除了）那些眼神極好或反應(yīng)很快的人，其他情況下很難以突出顯示他們想要的確切文字。若用戶不知道鍵盤快捷鍵，也看不到隱藏的編輯菜單，或從未使用右鍵菜單或不知道長按觸屏彈出選項菜單，那么他很可能無法察覺到復(fù)制功能。

那么我們是否應(yīng)該提供一個“復(fù)制到剪貼板”按鈕來幫助用戶？這功能應(yīng)該會很有用，即使是對快捷鍵的人非常熟悉的用戶來說。

關(guān)于剪貼板的安全

幾年前，瀏覽器不可能直接使用剪貼板。開發(fā)人員不得不通過Flash來實(shí)現(xiàn)。

剪貼板看起來無關(guān)緊要，但想象一下，如果瀏覽器能夠隨意查看和操作內(nèi)容，會發(fā)生什么。JS腳本（包括第三方腳本）能查看剪貼板內(nèi)的文本信息，并將密碼，敏感信息甚至整個文檔發(fā)送到遠(yuǎn)程服務(wù)器。

現(xiàn)在的剪貼板基本功能有限，有如下限制：

1. 大多數(shù)瀏覽器支持剪貼板，除了Safari。

2. 支持因?yàn)g覽器而異 ，有些功能不完整或有問題。

3. 事件必須由用戶必須發(fā)起，如點(diǎn)擊鼠標(biāo)或按下鍵盤。腳本不能自由訪問剪貼板。

document.execCommand（）

此方法就是實(shí)現(xiàn)剪貼板的關(guān)鍵，它可以傳入 cut , copy , paste 三種參數(shù)。從最常用的 document.execCommand（'copy'） 開始介紹。

在使用之前，我們應(yīng)該檢查瀏覽器是否支持 copy 命令: document.queryCommandSupported('copy'); 或 document.queryCommandEnabled('copy'); ，這兩個方法效果相同。

但在Chrome下，盡管Chrome確實(shí)支持使用 copy 命名,但兩個方法都返回 false 。所以最好是將檢查代碼包在一個 try-catch 代碼塊中。

下一步，我們應(yīng)該允許用戶復(fù)制什么呢？必須突出顯示文本，所有瀏覽器都可用 select() 方法選擇文本input和textarea內(nèi)的文本。同時Firefox和Chrome / Opera也支持 document.createRange 方法，該方法允許從任何元素中選擇文本，如下：

// select text in #myelement node
  var
   myelement = document.getElementById('#myelement'),
   range = document.createRange();
  range.selectNode(myelement);
  window.getSelection().addRange(range);

但I(xiàn)E / Edge不支持。

clipboard.js

若你不想自己實(shí)現(xiàn)一個較為健壯的跨瀏覽器剪貼板方法的話， clipboard.js 可以幫你。它有好幾種設(shè)置選項的方式，如H5的data屬性，設(shè)置綁定觸發(fā)元素以及目標(biāo)元素，如：

copy

自己動手實(shí)現(xiàn)

clipboard.js大小僅2Kb，若僅實(shí)現(xiàn)如下的部分功能的話，那么可以在20行的代碼內(nèi)實(shí)現(xiàn)：

僅部分表單元素可被復(fù)制

若在不支持的瀏覽器中（沒錯，就是指Safari），可突出顯示選中文本，并提示用戶按 Ctrl / Cmd + C 。

像clipboard.js一樣，先創(chuàng)建一個button用于觸發(fā)方法，它具有一個data屬性 data-copytarget ，指向要copy的元素(即 #website )

copy
一個立即執(zhí)行函數(shù)表達(dá)式綁定click事件的函數(shù)，該函數(shù)用于解析 data-copytarget 屬性內(nèi)容，選擇對應(yīng)字段的文本并執(zhí)行 document.execCommand('copy') ,。若失敗，文本保持選中狀態(tài)，顯示提示框：
(function() {
 'use strict';
 // click events
 document.body.addEventListener('click', copy, true);
 // event handler
 function copy(e) {
  // find target element
  var
   t = e.target,
   c = t.dataset.copytarget,
   inp = (c ? document.querySelector(c) : null);
  // is element selectable?
  if (inp && inp.select) {
   // select text
   inp.select();
   try {
    // copy text
    document.execCommand('copy');
    inp.blur();
   }
   catch (err) {
    alert('please press Ctrl/Cmd+C to copy');
   }
  }
 }
})();

示例

雖然在上例中，算上樣式和動畫的代碼，代碼已經(jīng)超過20行了，但動畫和樣式是可選的。

總結(jié)：

1. 通過 .select() 選擇要復(fù)制的表單元素的內(nèi)容

2. 調(diào)用 document.execCommand("copy") 方法

3. 調(diào)用 .blur() 方法，從表單元素中移除焦點(diǎn)

4. 將第2、3步包在 try catch 塊中，在不支持的瀏覽器下則提示

其他方式

有很多新穎的剪貼板應(yīng)用方式。例如 Trello.com ,將鼠標(biāo)懸停在卡片上時，可以按 Ctrl / Cmd + C 并將該卡片的鏈接地址復(fù)制到剪貼板。其背后實(shí)現(xiàn)的方式為：先創(chuàng)建一個包含URL的隱藏表單元素，然后選中并復(fù)制其內(nèi)容。非常巧妙且實(shí)用 —— 我懷疑很少有用戶知道這個功能！

關(guān)于“JS代碼如何實(shí)現(xiàn)粘貼板復(fù)制功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。