【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