发布时间:2018-05-13作者:laosun阅读(2844)
网站文章中含有pre的代码显示,所以少不了高亮、复制或者打开窗口显示等等插件的配合.
那么打开窗口显示,博主已经发过一篇文章了,window.open弹出空页面,pre代码复制窗口,不创建页面也能显示信息
那么复制到粘贴板怎么做呢,其实现在有很多现成的插件,博主发现了一个比较好用的 clipboard 。
打开官网下载,在网站引入一个js文件即可。
<script src="${ctx!}/assets/js/clipboard.min.js"></script>
使用方式如下:
$(document).ready(function(){ var clipboard = new ClipboardJS("#copypre", { text: function(trigger) { //var content = bCon($(trigger)); //return content; return "这是复制的内容,秘密!!!"; } }); clipboard.on('success', function(e) { alert("复制成功"); e.clearSelection(); }); clipboard.on('error', function(e) { alert("复制失败"); }); });
为了方便大家更好的进行测试学习,博主做了两个例子:
<button class="btn_text2">点击复制2</button> <script> var clipboard2 = new ClipboardJS(".btn_text2", { text: function(trigger) { return "啊,进去了2"; } }); clipboard2.on('success', function(e) { alert("复制成功2"); e.clearSelection(); }); clipboard2.on('error', function(e) { alert("复制失败2"); }); </script> <input type="text" id="val" value="啊,进去了3"/> <button class="btn_text3" data-clipboard-target="#val">点击复制3</button> <script> var clipboard3 = new ClipboardJS(".btn_text3"); clipboard3.on('success', function(e) { alert("复制成功3"); e.clearSelection(); }); clipboard3.on('error', function(e) { alert("复制失败3"); }); </script>
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/23e66a76d3374e649f1ea7a498b353c4.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
关键字: jquery 前端 源码 开源 javascript