方法一:使用ZeroClipboard.js插件
<html> <head> <meta charset="UTF-8"> </head> <body> <input type="text"> <script type="text/javascript" src="dist/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="dist/ZeroClipboard.min.js"></script> <div contenteditable="true" style="width:200px;height: 400px;border:1px solid red"></div> <div id="content" > <p>99u999999</p> <a><img src="http://app1.xesimg.com/roommsg/ab78423e59a018f0adaa212a3998a15a_small.jpg" alt="" data-url="http://app1.xesimg.com/roommsg/ab78423e59a018f0adaa212a3998a15a_big.jpg" class="img-rounded img-thumbnail"></a> </div> <div>ddd</div> <input id="copy" type="button" data-clipboard-text="复制文本" value="复制固定文本内容"> <input id="copyHtml" type="button" data-clipboard-target="content" value="复制一个id中的所有html内容"> <script type="text/javascript"> new ZeroClipboard( document.getElementById("copy") ); new ZeroClipboard( document.getElementById("copyHtml") ); </script> </body> </html>
方法二:使用document.execCommand('copy');
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS复制功能</title> <style> *{ margin:0; padding:0; } input{ border:1px solid #ccc; padding: 5px; width: 200px; } button{ height:32px; } </style> </head> <body> <div style="width: 400px;height: 200px;border: 1px solid red" contenteditable="true"></div> <input type="text" placeholder="里面输入文字" value="复制文本域中的内容"> <div id="copyContent">复制非文本域的元素内容<p><a href="###">链接</a></p></div> <button id="copyInput" type="button">点击复制</button> <button id="noInput" type="button">点击复制非文本框文本域的元素</button> </body> </html> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> <script> $(document).ready(function(){ //复制文本域中的内容 $('#copyInput').click(function(){ $('input').select(); document.execCommand('copy'); //alert('复制文本域中的内容') }) //复制非文本域的元素内容 $('#noInput').click(function(){ //狐火浏览器下会把外层的id元素也复制进去,容易造成错误,所以需要区分copy内容的id的范围 ,但是目前没有找到区分的方法,即使在copyContent外 加一层居然也会把加的那层也复制进去 SelectText('copyContent'); document.execCommand('copy'); //alert('复制非文本域的元素内容') }) }) function SelectText(element) { var browserName=navigator.userAgent.toLowerCase(); var text = document.getElementById(element); if (/msie/i.test(browserName) && !/opera/.test(browserName)) { var range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else { var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); //苹果浏览器下,现已经不支持html的内容 // var selection = window.getSelection(); // selection.setBaseAndExtent(text, 0, text, 1); } } </script>