JavaScript | 文本复制工具clipboard.js的使用详解（使用clipboard复制ajax请求的数据）

用法1

<!-- 该代码可直接创建HTML文件运行 -->
 
   
    <meta charset="utf-8" >
    <title>target-input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" >
   
   
    <!-- 1. 定义一些标记 -->
    <!-- 2. 设置按钮 -->
       
    <!-- 示例1：复制input元素的value值 -->  
    <input id="foo" type="text" value="这是input元素的value值" >
    <button data-clipboard-action="copy" data-clipboard-target="#foo">点击复制 
      
    <!-- 示例2：剪切textarea元素的值 -->
    <textarea id="bar">这里的文本可被复制或者剪切
    <button data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字
       
    <!-- 示例3：复制div元素的值 -->
    <div>这是div元素里的文字</div>
    <button data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字
    <!-- 示例4：复制button自己设置的值 -->
    <button data-clipboard-text="这里的文字将被复制">复制自己的文字
       
    <!-- 3. 引入库文件 -->
    <!--  <script src="../dist/clipboard.min.js"></script> -->
    <script src="https: cdnjs.cloudflare.com="" ajax="" libs="" clipboard.js="" 2.0.6="" clipboard.min.js"="">
    <script>
      //4. 实例化clipboard
      var clipboard = new ClipboardJS(&#39;.btn&#39;);
      //5. 复制成功的响应事件【按F12控制台可见】
      clipboard.on(&#39;success&#39;, function (e) {
        console.log(e);
        //打印动作信息（copy或者cut）
        console.info(&#39;Action:&#39;, e.action);
        //打印复制的文本
        console.info(&#39;Text:&#39;, e.text);
        //打印trigger
        console.info(&#39;Trigger:&#39;, e.trigger);
      });
      //6. 复制失败的响应事件
      clipboard.on(&#39;error&#39;, function (e) {
        console.log(e);          
        console.error(&#39;Action:&#39;, e.action);
        console.error(&#39;Trigger:&#39;, e.trigger);
      });
    </script>
   
</script src="https:></button data-clipboard-text="这里的文字将被复制"></button data-clipboard-action="copy" data-clipboard-target="div"></button data-clipboard-action="cut" data-clipboard-target="#bar"></textarea id="bar"></button data-clipboard-action="copy" data-clipboard-target="#foo"></input id="foo" type="text" value="这是input元素的value值" ></meta name="viewport" content="width=device-width, initial-scale=1" ></meta charset="utf-8" >
用法2

<!-- 该代码可直接创建HTML文件运行 -->
 
 
   
    <meta charset="utf-8" >
    <title>function-target</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" >
   
   
    <!-- 1. 基本信息定义 -->
    <button>点击复制</button>
    <div>这里的内容将被复制</div>
    <!-- 2. 引入库文件 -->
    <!--  <script src="../dist/clipboard.min.js"></script> -->
    <script src="https: cdnjs.cloudflare.com="" ajax="" libs="" clipboard.js="" 2.0.6="" clipboard.min.js"="">
       
    <script>
      //3. 实例化clipboard
      var clipboard = new ClipboardJS(&#39;.btn&#39;, {
        target: function () {
          //获取文档中第一个 <div> 元素：
          return document.querySelector(&#39;div&#39;);
          //返回文档中id为copy-btn的元素
          //document.querySelector("#copy-btn");
          //返回文档中 的第一个元素:
          //document.querySelector(".btn");
          //返回文档中 的第一个 <p> 元素:
          //document.querySelector("p.btn");
          //还有更多方法，可自行百度
        },
      });
      //复制成功响应
      clipboard.on(&#39;success&#39;, function (e) {
        console.log(e);
      });
      //复制失败响应
      clipboard.on(&#39;error&#39;, function (e) {
        console.log(e);
      });
    </script>
   
</script src="https:></meta name="viewport" content="width=device-width, initial-scale=1" ></meta charset="utf-8" >
用法3

<!-- 该代码可直接创建HTML文件运行 -->
 
 
   
    <meta charset="utf-8" >
    <title>function-text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" >
   
   
    <!-- 1. 定义基本元素 -->
    <button>Copy</button>
    <!-- 2. 引入库文件 -->
    <!--  <script src="../dist/clipboard.min.js"></script> -->
    <script src="https: cdnjs.cloudflare.com="" ajax="" libs="" clipboard.js="" 2.0.6="" clipboard.min.js"="">
    <script>
      //3. 实例化clipboard
      var clipboard = new ClipboardJS(&#39;.btn&#39;, {
        text: function () {
          return &#39;这里的文本将被复制&#39;;
        },
      });
      //复制成功响应
      clipboard.on(&#39;success&#39;, function (e) {
        console.log(e);
      });
      //复制失败响应
      clipboard.on(&#39;error&#39;, function (e) {
        console.log(e);
      });
    </script>
   
</script src="https:></meta name="viewport" content="width=device-width, initial-scale=1" ></meta charset="utf-8" >
用法4

//3. 实例化clipboard
    var clipboard = new ClipboardJS('.btn', {
        text: function () {
            //return '这里的文本将被复制';
            //
            $.ajax({
                url: '请求的链接',
                type: 'POST',
                //POST的数据
                data: {
                    _token: $("input[name='_token']").val(),
                    id: $("input[name='id']").val(),
                },
                //异步调用关闭
                async: false,
                //请求成功：
                success: function (result) {
                    //返回成功的文本
                    return result.data;
                },
                //请求出错
                error: function (e) {
                    //弹窗提示
                    alert(e.message)
                }
            });
        },
    });
用法5

//定义复制模块JS代码
        const pageCtrl = {
            //发送AJAX请求，生成复制的文本，el是传递数据的
            _codeGenerator: function (el) {
                const $el = $(el);
                $.ajax({
                    url: '请求的URL',
                    type: 'POST',
                    data: {
                        _token: el.data('_token'),
                        id: el.data('id'),
                    },
                    //移步请求一定要关闭（false）
                    async: false, 
                    success: function (result) {
                        //可以打印请求后的数据
                        console.log(result.status);
                        //返回成功结果
                        if (result.status === 'success') {
                            $el.data('result', result.data[0].link);
                        }
                        //否则，操作失败，根据具体失败情形提示
                        else {
                            //弹窗提示
                            $.alert(result.msg, '操作失败');   
                            //返回结果不要漏
                            $el.data('result', "");
                        }
                    }
                });
            },
            /* 复制功能*/
            _clip: function () {
                const _self = this;
                const clipboard = new ClipboardJS('.copy-btn', {
                    text: function (el) {
                        //构造参数
                        const $el = $(el);
                        //设置初始值
                        $el.data("_token", $("input[name='_token']").val());
                        $el.data('id', $("input[name='id']").val());
                        //ajax请求并设置要复制的字符串
                        _self._codeGenerator($el);
                        //返回复制结果
                        return $el.data('result');
                    }
                });
                //复制成功后的方法
                clipboard.on('success', function (e) {
                    // console.log(e.text)
                    $.alert('链接：' + e.text + ' 已复制', '复制成功'                 
                });
                //复制失败后的方法 
                clipboard.on('error', function (e) {
                    console.log(e);
                    $.alert('复制失败，请重试！', '复制失败',)
                });
            },
             
            //初始化方法          
            init: function () {
                this._clip();
            }
        };
        $(function () {
            //初始化
            pageCtrl.init();
        })