js实现点击按钮复制目标内容
七娃博客1,219人阅读
网站中很多地方用到点击复制的效果,例如,点击复制pre的代码块,点击复制链接,点击复制淘宝代码,相信很多人都用过或者见过,那么今天分享一个js实现点击复制到剪切板的功能!
html代码:
<p class="copy_url singleHidden share_text_02" id="target" >https://appnsdahiuhibaxankbgsregbcj...</p> <textarea id="input_copy" style="opacity: 0;height: 0;">这是幕后黑手</textarea> <span class="copy_btn" id="copy_btn">复制</span>
js代码:
$("#copy_btn").click(function(){ var urls = $(".copy_url").text(); console.log(urls); //开始复制链接 var input = document.getElementById("input_copy"); input.value = urls; // 修改文本框的内容 input.select(); // 选中文本 document.execCommand("copy"); // 执行浏览器复制命令 })
注意:这是js+jquery实现的,用的话别忘引入jquery!
[…] 最近想捣鼓个页面,有个复制功能,虽然之前整理的复制功能能用(《js实现点击按钮复制目标内容》和《微信/头条/百度小程序实现点击复制功能》),但是就不用,我就是玩!然后,选择了clipboard.js插件,嗯,怎么说呢?这个插件,完全可以!下面我用了clipboard插件之后,觉得能用到的三种方法。 […]
真好用,哈哈@!
[…] 之前整理过一篇Html5点击复制文本内容效果,详情《js实现点击按钮复制目标内容》,今天公司抖音小程序也需要实现点击复制抖音号的功能,就那微信小程序的源码测试了,结果我笑了! […]