使用JS如何實現貼上簿複製功能

本文給大家分析20行JS程式碼實現黏貼簿功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

使用剪貼簿是一項基本技能。身為碼農都應知道， Tab , Ctrl/Cmd A ， Ctrl / Cmd C 以及 Ctrl / Cmd V 分別是自動對焦、複製、貼上的快捷鍵。

而對一般使用者可能就不太容易了。即使使用者知道剪貼簿是什麼，（除了）那些眼神極好或反應很快的人，其他情況下很難以突出顯示他們想要的確切文字。若使用者不知道鍵盤快速鍵，也看不到隱藏的編輯選單，或從未使用右鍵選單或不知道長按觸控螢幕彈出選項選單，那麼他很可能無法察覺到複製功能。

那麼我們是否應該提供一個「複製到剪貼簿」按鈕來幫助使用者？這功能應該會很有用，即使是對快捷鍵的人非常熟悉的使用者來說。

關於剪貼簿的安全性

幾年前，瀏覽器不可能直接使用剪貼簿。開發人員不得不透過Flash來實現。

剪貼簿看起來無關緊要，但想像一下，如果瀏覽器能夠隨意查看和操作內容，會發生什麼。 JS腳本（包括第三方腳本）可查看剪貼簿內的文字訊息，並將密碼，敏感資訊甚至整個文件傳送到遠端伺服器。

現在的剪貼簿基本功能有限，有以下限制：

1. 大多數瀏覽器支援剪貼簿，除了Safari。

2. 支援因瀏覽器而異 ，有些功能不完整或有問題。

3. 事件必須由使用者必須發起，例如點擊滑鼠或按下鍵盤。腳本不能自由存取剪貼簿。

document.execCommand（）

此方法就是實作剪貼簿的關鍵，它可以傳入cut , copy , paste 三種參數。從最常用的 document.execCommand（'copy'） 開始介紹。

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

但在Chrome下，儘管Chrome確實支援使用 copy 命名,但兩個方法都傳回 false 。所以最好是將檢查程式碼包在一個 try-catch 程式碼區塊中。

下一步，我們該允許使用者複製什麼呢？必須反白顯示文本，所有瀏覽器都可用 select() 方法選擇文本input和textarea內的文本。同時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);

但IE / Edge不支援。

clipboard.js

如果你不想自己實作一個較為健壯的跨瀏覽器剪貼簿方法的話， clipboard.js 可以幫你。它有好幾種設定選項的方式，如H5的data屬性，設定綁定觸發元素以及目標元素，如：

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

自己動手實作

clipboard .js大小只有2Kb，若只實作如下的部分功能的話，那麼可以在20行的程式碼內實作：

##僅部分錶元素可被複製

若在不支援的瀏覽器中（沒錯，就是指Safari），可反白顯示選取文本，並提示使用者按Ctrl / Cmd C 。

就像clipboard.js一樣，先建立一個button用於觸發方法，它具有一個data屬性data-copytarget ，指向要copy的元素(即#website )

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand(&#39;copy&#39;) ,。若失败，文本保持选中状态，显示提示框：
(function() {
 &#39;use strict&#39;;
 // click events
 document.body.addEventListener(&#39;click&#39;, 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(&#39;copy&#39;);
    inp.blur();
   }
   catch (err) {
    alert(&#39;please press Ctrl/Cmd+C to copy&#39;);
   }
  }
 }
})();

範例

雖然在上例中，算上樣式和動畫的程式碼，程式碼已經超過20行了，但動畫和樣式是可選的。

總結：

1. 透過.select() 選擇要複製的表單元素的內容

2. 呼叫document.execCommand( "copy") 方法

3. 呼叫.blur() 方法，從表單元素移除焦點

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

#其他方式

有許多新穎的剪貼簿應用方式。例如 Trello.com ,將滑鼠停留在卡片上時，可以按

Ctrl / Cmd C 並將該卡片的連結位址複製到剪貼簿。背後實現的方式為：先建立一個包含URL的隱藏表單元素，然後勾選並複製其內容。非常巧妙且實用 —— 我懷疑很少有用戶知道這個功能！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用JS如何實現循環Nodelist Dom列表

#在Vue中如何實現點擊後文字變色

在Vue-cli中如何實作為單獨頁面設定背景色

以上是使用JS如何實現貼上簿複製功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！