js实现点击按钮复制目标内容
七娃博客211 次
网站中很多地方用到点击复制的效果,例如,点击复制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实现点击按钮复制目标内容 - Qui-Note
[…] 之前整理过一篇Html5点击复制文本内容效果,详情《js实现点击按钮复制目标内容》,今天公司抖音小程序也需要实现点击复制抖音号的功能,就那微信小程序的源码测试了,结果我笑了! […]