【JS插件】【2】操做剪切板 clipboard.js 與 ZeroClipboard.js

前言：

個人需求是，用戶點擊「複製連接」按鈕，就把輸入框裏的內容複製到剪切板，用戶在其餘地方直接右鍵粘貼便可。用戶若是移動鼠標到輸入框，自動選中文字，用戶右鍵複製便可去其餘地方粘貼。相似於百度雲盤的分享連接

正文：

1，ZeroClipboard.js

最開始用的這個，發現依賴於flash，雖然能夠先判斷是否有flash，沒有的話提示手動複製，但在實際使用場景中，發現沒安裝flash的電腦還挺多的。

2，clipboard.js

簡單易用，不依賴於flash

官網：clipboard.js — Copy to clipboard without Flash （ https://clipboardjs.com/）

個人代碼：

jsp：

</div>
    <input type="text" id="copyInput" readonly="readonly" value="被複制的文字">
    <a id="copy" data-clipboard-action="copy" data-clipboard-target="#copyInput">複製連接</a>
</div>

<script type="text/javascript" src="js/third/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/third/clipboard.min.js"></script>

js：

//點擊按鈕複製
var clipboard = new Clipboard("#copy");
clipboard.on('success', function(e) {
    $("#tips").text("複製連接成功");
});
clipboard.on('error', function(e) {
    $("#tips").text("該瀏覽器不支持該複製方式，請按Ctrl+C複製");
});

//右鍵複製
$("#copyInput").mouseover(function(){
    $("#copyInput").focus();
    $("#copyInput").select();
});

參考博客：

【原】js實現複製到剪貼板功能，兼容全部瀏覽器 - 白樹 - 博客園
http://www.javashuo.com/article/p-acmezcdl-ev.html

java 剪切板 clipboard.js 與 ZeroClipboard.swf - qq_24435837的博客 - CSDN博客
https://blog.csdn.net/qq_24435837/article/details/52739270