博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

方法一:使用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>