Javascript 实现复制（Copy）动作大全

深碍√TFBOYSˉ_ 2022-12-21 15:56 141阅读 0赞

![format_png][]

来源 | https://www.liqingbo.cn/blog-1412.html

**1、实现点击按钮，复制文本框中的的内容**

原理：点击按钮的时候触发copyUrl2函数，根据biao1 ID选中对象，然后在根据execCommand复制选中内容，所以此时选择的内容必须是可视的，也就是说不能是隐藏的文本域。

**2、复制专题地址和 url 地址，传给 QQ/MSN 上的好友**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Js复制代码</title>
    </head>
    <body>
    <p>
    <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址，传给QQ/MSN上的好友">
    <script language="javascript">
    function copyToClipBoard(){
    var clipBoardContent="";
    clipBoardContent+=document.title;
    clipBoardContent+="";
    clipBoardContent+=this.location.href;
    window.clipboardData.setData("Text",clipBoardContent);
    alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
    }
    </script>

**3、直接复制 url**

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
    
    
    <script language="javascript">
    function copyUrl(){
        var clipBoardContent=this.location.href;
        window.clipboardData.setData("Text",clipBoardContent);
        alert("复制成功!");
    }
    </script>

**4、点击文本框时，复制文本框里面的内容**

<input onclick="oCopy(this)" value="你好.要copy的内容!">
    <script language="javascript">
    function oCopy(obj){
        obj.select();
        js=obj.createTextRange();
        js.execCommand("Copy")
        alert("复制成功!");
    }
    </script>

**5、复制文本框或者隐藏域中的内容**

**6、复制 span 标记中的内容**

**7、浏览器兼容 copyToClipboard("拷贝内容")**

**8、兼容各大浏览器的复制代码（结合ZeroClipboard.js）**

<html>
    <head>
    <title>Zero Clipboard Test</title>
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script language="JavaScript">
     var clip = null; 
     function $(id) { return document.getElementById(id); } 
     function init() {
         clip = new ZeroClipboard.Client();
         clip.setHandCursor(true);     
         clip.addEventListener('mouseOver', function (client) {
      // update the text on mouse over
      clip.setText( $('fe_text').value );
         });
    
    
         clip.addEventListener('complete', function (client, text) {
      //debugstr("Copied text to clipboard: " + text );
      alert("该地址已
    经复制，你可以使用Ctrl+V 粘贴。");
         });
         clip.glue('clip_button', 'clip_container' );
     }
    </script>
    </head>
    <body onLoad="init()">
    <input id="fe_text" cols=50 rows=5 value=复制内容文本1 >
    <span id="clip_container"><span id="clip_button"><b>复制</b></span></span>
    </body>
    </html>

本文完~

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 1][]

![format_png 2][]

点个**在看**支持我吧

![format_png 3][]

[format_png]: /images/20221120/e75e86f1b1744c2ba48a88aa884944d6.png
[format_png 1]: /images/20221120/475eaf5289f64fee864dc99e70880b82.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy83UVJUdmtLMnFDNkJHTkxPUXh3Qm1NVE9HbU8wZFNkMzFMbFhMNUhvWldCSDZmS3RTU2VLUTJET2VUZlZSN25IVlhsMFU3UlNBY2hVVm9pYTJiRXJZZmcvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi83UVJUdmtLMnFDNkJHTkxPUXh3Qm1NVE9HbU8wZFNkM05tT1dzWkJNV2czQkMxbXNkd3R5dkJrTkxZaDF4R0xRaWJtNFFzSGliQ2x3eFdmenVpYmljYkpjSUEvNjQw?x-oss-process=image/format,png