在页面中有时需要用到复制这个功能,提高用户体验。而内容是放在div中展示的不可以让用户修改。就相当于页面中有两个重复的内容,一个是用才展示给用户的,一个是用来复制的,而这个复制的用户看不到内容。
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> .btnSel { border: 0px; border-radius: 5px; background-color: #9f9fff; color: white; } .contentsCls { border: 0px; width: 1px; height: 1px; resize: none; } </style> <body> <input class='btnSel' id="btnId" style='font-size: 11px;' type='button' onClick='jsCopy();' value='复制数据' /> <!-- <div id="id1"> asdf asdf </div> --> <div> <textarea id="contents" class="contentsCls" style="border: 0px; width: 0px; height: 0px; resize: none;" col="1" row="1" readonly="readonly"> 3 1.1 1.01 -9 0.98 333 78.888</textarea> </div> </body> <script type="text/javascript"> var flag = 1; function jsCopy() { /* var a=document.getElementById("id1").innerText; document.getElementById("contents").value = a; */ var e = document.getElementById("contents"); //对象是contents e.select(); //选择对象 tag = document.execCommand("Copy"); //执行浏览器复制命令 if (tag) { document.getElementById("btnId").value = "复制成功"; } if (flag == 1) { flag = 2; document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#00CC66"; } else { flag = 1; document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#9f9fff"; } } </script> </html>