• JS代码实现复制功能


    本人没什么基础看了好久百度,不知道为什么在百度上问一个js实现copy功能会多出那么多代码出来,感觉废话一堆效果还没能达到需要复制 的效果。

    然而在我看来,js复制代码 无非就那么几句罢了。原生copy代码:document.execCommand("Copy");  就可以达到复制的效果了,但我习惯用以下的方法:

    首先,必须要调用第三方【clipboard.min.js】包,有它才能js代码才能实现复制功能,js包网上都可以下。这个如同jQuery一样调用:<script src="../js/clipboard.min.js"></script> 即可,这是第一句代码;

    第二句代码 对对象进行操作的方式方法有两种可以选择:

    (1)data-clipboard-action="copy";    复制

    (2)data-clipboard-action="cut";     剪切

    第三句代码 copy或cut 的对象是谁:

    data-clipboard-target=".abc"      //这个对象可以是 #id,也可以类选择器  .class ,也可以是元素等等

    第四句代码 实例化 Clipboard 对象:

    var clipboard = new Clipboard(".abc");  到这里代码就已经实现了复制的功能了

    -----------------------------------------------------------------------------------------------------------------------------------------

    看看 案例代码:

    (1)纯文本copy:textarea

    <script type="text/javascript" src="../js/clipboard.min.js"></script>

    <script type="text/javascript">

      function copyUrl2(){

        var Url2=document.getElementById("biao1");//获取文本框id

        Url2.select(); // 选择对象用户定义的代码区域

        document.execCommand("Copy"); //原生copy方法执行浏览器复制命令

        alert("内容复制成功,去粘贴看看!"); //弹窗

        //window.location.href = 'weixin://';  //打开手机微信

      }

    </script>

    <textarea cols="27" rows="5" id="biao1">这里面的文本内容被复制 </textarea>

    <input type="button" onClick="copyUrl2()" value="点击复制Copy" /> 

    -------------------------------------------------------------------------------------------------

    (2)非纯文本内容的某个标签:span例举

    <span id="btn" class="abc" data-clipboard-action="copy" data-clipboard-target=".abc">这里可以点击复制</span>

    点击内容直接执行js代码:

    <script type="text/javascript" src="../js/clipboard.min.js"></script>

    <script type="text/javascript">

    var clipboard = new Clipboard("#btn"); //实例化对象

    //复制成功执行的回调

    clipboard.on('success', function(e) {

      console.log(e); //返回值类型给控制台 没什么用 可以注释掉

      alert("复制成功,去粘贴看看吧!");

      //window.location.href = 'weixin://';  //打开手机微信

    });

    //复制失败执行的回调

    clipboard.on('error', function(e) {

      alert("复制失败!请手动复制")

    });

    </script>

     ---------------------------------------------------------------------

    (3).我比较喜欢使用下面这种传参的方式,

    <samp id="target" style="font-size: 15pt;color: red;" >85687</samp>
    <button id="biao2" data-clipboard-action="copy" data-clipboard-target="#target" onclick='copy("#biao2")'>这里可以点击复制</button>

    <script type="text/javascript" src="../js/clipboard.min.js"></script>

    <script type="text/javascript">

    function copy(id) {
      var clipboard = new Clipboard(id);
      clipboard.on('success', function(e){
        alert("复制成功,去粘贴试试吧!");
        //可执行其他代码操作
      });
      clipboard.on('error', function(e){
        alert("复制失败!请手动复制")
      });
    }
    </script>

  • 相关阅读:
    java 多个设备,锁定先后顺序
    使用个推的时候出现Installation error: INSTALL_FAILED_DUPLICATE_PERMISSION
    android 开发-设置控件/view的水平方向翻转
    IIS8中 出现ashx 401:未授权,uploadify上传文件失败
    No Launcher activity found!
    activiti工作流之Eclipse的Eclipse BPMN 2.0 Designer无法安装或者(安装后无法重复打开*.bpmn)
    android Ant 打包
    andorid 直接解压后的xml的解密
    获取当前运行的类名或者方法
    http断点下载客户端和服务端
  • 原文地址:https://www.cnblogs.com/longxinyv/p/11066611.html
Copyright © 2020-2023  润新知