【JS插件】【9】操作剪切板 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

上一篇:java – 为什么Clipboard Listener使用更多的CPU使用率?


下一篇:如何将图片从画布复制到剪贴板?