前言:
我的需求是,用户点击“复制链接”按钮,就把输入框里的内容复制到剪切板,用户在其他地方直接右键粘贴即可。用户如果移动鼠标到输入框,自动选中文字,用户右键复制即可去其他地方粘贴。类似于百度云盘的分享链接
正文:
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