这次给大家带来用JS做的点击复制效果,用JS做的点击复制效果注意事项有哪些,下面就是实战案例,一起来看一下。
原理:
模拟通过全选表单内的textarea数据调用浏览器Copy命令实现复制
示例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>复制</title></head><body> <script> var textCopy=function (data) { var f=document.createElement("form"); f.id="copy-"+Date.parse(new Date()); f.onsubmit=function(){return false}; f.style="opacity: 0;height: 1px;width: 1px;overflow: hidden;position:fixed;top: -1;left: -1;z-index: -1;" f.innerHTML=`<button onclick='story.select();document.execCommand("Copy");'></button> <textarea name="story">${data}</textarea>`; document.body.appendChild(f); document.querySelector(`#${f.id}>button`).click(); document.body.removeChild(document.getElementById(f.id)); } </script> <input id="test" value="" /> <button onclick="textCopy(document.getElementById('test').value)" >复制</button> </body></html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
以上是用JS做的点击复制效果的详细内容。更多信息请关注PHP中文网其他相关文章!