做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复制文本框(textarea)里的内容,把要复制的内容写在textarea里,用定位负值把文本框隐藏掉,然后就实现复制的功能了,贴一下简单的代码,共有需要的同学参考,欢迎大神指正。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>点击按钮复制dom里的内容</title> </head> <body> <div> <div>我是要复制的内容1</div> <textarea cols="20" rows="10" id="copy1" style="position: fixed;top: -2000px;">我是要复制的内容1</textarea> <input type="button" onclick="copyContent('copy1')" value="复制1" /><br /><br /> <div>我是要复制的内容2</div> <textarea cols="20" rows="10" id="copy2" style="position: fixed;top: -2000px;">我是要复制的内容2</textarea> <input type="button" onclick="copyContent('copy2')" value="复制2" /><br /><br /> <div>我是要复制的内容3</div> <textarea cols="20" rows="10" id="copy3" style="position: fixed;top: -2000px;">我是要复制的内容3</textarea> <input type="button" onclick="copyContent('copy3')" value="复制3" /><br /><br /> </div> <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function copyContent(id){ var copyCon = document.getElementById(id); copyCon.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘。"); } </script> </body> </html>