最近應產品要求，需要實現一個按鈕級別熱復制文本功能，效果就是單擊按鈕復制對應的文本，該文本是需要從數據庫里面取出來然后加密的，最初的打算是使用js插件在前臺頁面搞定。

　?? 于是上網找了一些相關資料，發現幾乎都是用的zeroClipBoard這個插件，這個插件使用的是flash來實現復制效果，但是flash在目前已 經不再流行，甚至有些瀏覽器已經不再對flash支持或者完全禁用，于是便暫時放棄了這個想法。但是在查找途中發現ie竟然可以一句代碼搞定復制，頓時覺 得好無語（尤其是對比ie和其他瀏覽器之后，之前我總是以為ie和其他瀏覽器相比，麻煩的是 ie）window.clipboardData.setData("Text","這里就是你要復制的文本信息");這里只是簡單提一下ie上的復制文 本，回歸正題。

　　不能用flash來實現，只好使用另外的辦法了，我之后是用的java中awt包里面的工具類，簡單的說就是調用系統的粘貼板，然后往里面設置文本信息。原理十分簡單，下面展示源代碼：

1 package com.mango.online.util; 2 3 import java.awt.Toolkit; 4 import java.awt.datatransfer.Clipboard; 5 import java.awt.datatransfer.DataFlavor; 6 import java.awt.datatransfer.StringSelection; 7 import java.awt.datatransfer.Transferable; 8 import java.awt.datatransfer.UnsupportedFlavorException; 9 import java.io.IOException; 10 11 import com.itextpdf.text.Image; 12 13 /** 14 * ClassName:SysClipboardUtil <br/> 15 * Function: 復制到粘貼板 工具類 <br/> 16 * Date: 2016年4月11日 上午9:22:16 <br/> 17 * @author idiotzhang 18 * @version 1.0 19 * @see 20 */ 21 public class SysClipboardUtil { 22 /** 23 * 從剪切板獲得文字。 24 */ 25 public static String getSysClipboardText() { 26 String ret = ""; 27 Clipboard sysClip = Toolkit.getDefaultToolkit().getSystemClipboard(); 28 // 獲取剪切板中的內容 29 Transferable clipTf = sysClip.getContents(null); 30 31 if (clipTf != null) { 32 // 檢查內容是否是文本類型 33 if (clipTf.isDataFlavorSupported(DataFlavor.stringFlavor)) { 34 try { 35 ret = (String) clipTf 36 .getTransferData(DataFlavor.stringFlavor); 37 } catch (Exception e) { 38 e.printStackTrace(); 39 } 40 } 41 } 42 43 return ret; 44 } 45 46 /** 47 * 將字符串復制到剪切板。 48 */ 49 public static void setSysClipboardText(String writeMe) { 50 Clipboard clip = Toolkit.getDefaultToolkit().getSystemClipboard(); 51 Transferable tText = new StringSelection(writeMe); 52 clip.setContents(tText, null); 53 } 54 55 /** 56 * 從剪切板獲得圖片。 57 */ 58 public static Image getImageFromClipboard() throws Exception { 59 Clipboard sysc = Toolkit.getDefaultToolkit().getSystemClipboard(); 60 Transferable cc = sysc.getContents(null); 61 if (cc == null) 62 return null; 63 else if (cc.isDataFlavorSupported(DataFlavor.imageFlavor)) 64 return (Image) cc.getTransferData(DataFlavor.imageFlavor); 65 return null; 66 } 67 68 /** 69 * 復制圖片到剪切板。 70 */ 71 public static void setClipboardImage(final Image image) { 72 Transferable trans = new Transferable() { 73 public DataFlavor[] getTransferDataFlavors() { 74 return new DataFlavor[] { DataFlavor.imageFlavor }; 75 } 76 77 public boolean isDataFlavorSupported(DataFlavor flavor) { 78 return DataFlavor.imageFlavor.equals(flavor); 79 } 80 81 public Object getTransferData(DataFlavor flavor) 82 throws UnsupportedFlavorException, IOException { 83 if (isDataFlavorSupported(flavor)) 84 return image; 85 throw new UnsupportedFlavorException(flavor); 86 } 87 88 }; 89 Toolkit.getDefaultToolkit().getSystemClipboard().setContents(trans, 90 null); 91 } 92 }

　　雖然代碼貼出來比較多，但是我要用的十分少，只需要第二個“將字符串復制到剪切板”，至于如何調用我就不詳細說了（直接通過該類點出第二個方法，傳入你要復制的文本信息，嗯，就這么簡單）。

　 　運行起來，效果不錯，產品要求的功能是已經實現了。但是我在想這樣是不是不太合理，調用系統的粘貼板會不會影響性能。不過暫時也沒有辦法，就這樣吧。。 就這樣過了一兩天。等項目上線測試時發現復制功能突然間不能用了，我當時就無語了，檢查了代碼，嗯，沒有人動過，除了我。然后再看看本地代碼，測試，能運 行。然后鎖定出錯原因——服務器。

　　我在本地用的是windows+eclipse+tomcat，但是服務器上是linux。然后上網查資料了解到linux的系統和Windows不一樣，貌似需要做一些什么配置（具體的忘了），沒辦法，只好重新換方法。

　　經久之后還是決定使用最初的想法，使用js前臺頁面操作復制文本，finally，找到了一個插件。clipboard.js-master，這個插件在我的博客文件里面有，有需要的可以自行下載，鏈接不太好給。里面還有一些demo相信聰明的你們一定會看懂的。。

　　簡 單提一下里面的一些東西，重點是js文件，這個只需要引入你自己的項目即可，然后是一個注意點，如果你用的是復制一個文本框里面的內容，它復制成功后會獲 取文本框的焦點（也不失焦點，而是選中文本框里面的所有字符串），所以，如果你一但行把該文本框隱藏或者放入一個隱藏的div里面，復制是會失敗的。

　　我用的還是用button級別復制，把要復制的文本用data-clipboard-text屬性賦值即可。意思就是點擊該按鈕，就會復制fail按鈕里面的data-clipboard-text屬性的值。具體請參考案列。

　　最終我實現的效果就是這樣的。。截圖為證：

　　粘貼出來的東西就是data-clipbord-text里面的值。。。。。。

　　這樣的效果才是最終我想要的。。。。。。。

　　最后提供一下插件下載地址：

點擊下載clipboard-master.zip

轉載于:https://www.cnblogs.com/idiotalex/p/5435722.html

總結

以上是生活随笔為你收集整理的关于js复制文本信息（按钮级别）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。