使用JavaScript复制指定的页面文字到剪贴板 js复制页面文字
作者:Alpha时间:2019-09-08 阅读数:5974 +人阅读
使用JavaScript复制指定的页面文字到剪贴板,需要依赖一个js类:clipboard.min.js,现代化的拷贝文字,不依赖flash, 不依赖其他框架,gzip压缩后只有3kb大小(想了解这个插件的自行百度)。
代码示例如下:
<div id="alpha">待复制的文字内容</div> <button class="btn">复制按钮</button> <script> var content = $("#alpha").text(); var clipboard = new Clipboard('.btn', { text: function() { return content; } }); clipboard.on('success', function(e) { alert("文字复制成功"); }); clipboard.on('error', function(e) { console.log(e); }); </script>
代码很简单,通过jQuery获取待复制的文字内容,然后实例化插件类,如果想让复制成功后有个提示,可以在success中进行提示。
需要注意的是,点击的复制按钮必须是button,测试了其他标签均不可以。
记得必须引入类文件:clipboard.min.js!点击下载!
另外一种复制文字的方法,不需要引入类文件,但是兼容性有限,直接贴上代码,感兴趣的可以研究:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .test{display:black} </style> <body> <div> <span>微信</span> <div id="wxnum">微信hahaha2231</div> <a href="javascript:void(0);" id="copyBtn">复制</a> </div> </body> <script type="text/javascript"> function copyArticle(event) { const range = document.createRange(); range.selectNode(document.getElementById('wxnum')); const selection = window.getSelection(); if(selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); alert("复制成功!"); } document.getElementById('copyBtn').addEventListener('click', copyArticle, false); </script> </html>
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:595397166@qq.com