js实现复制功能，将需要复制的内容放入剪切板上

时间：2022-11-03 05:57:17

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

　　

相关文章