jQuery实现点击复制文本效果

jQuery实现点击复制文本效果

思路：

不能直接复制P标签，先将P标签的值赋值给textarea标签，然后再进行复制。

利用 opacity:0 将内容透明度设置为0，不显示。

别忘记引用JQ文件！

HTML代码

<style type="text/css"> .wrapper {position: relative;} #inputs {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <div class="wrapper"> <p id="texts">恭喜你复制成功了！</p> <textarea id="inputs">空盒子(可留空)</textarea> <p onclick="copyText()">点我复制</p> </div>

JS代码

<script type="text/javascript"> function copyText() { var texts = document.getElementById("texts").innerText; var inputs = document.getElementById("inputs"); inputs.value = texts; // 修改文本框的内容（赋值内容） inputs.select(); // 选中文本 document.execCommand("copy"); // 执行浏览器复制命令 alert("复制成功");//测试执行是否成功 } </script>

纯属记录，别无他意。