【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实现复制到剪贴板功能，兼容所有浏览器 - 白树 - 博客园
https://www.cnblogs.com/PeunZhang/p/3324727.html

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