实现点击按钮复制文本内容

最新推荐文章于 2024-07-29 11:53:27 发布

混水妹妹

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量1.4k

点赞数 1

分类专栏： js 复制粘贴文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42479115/article/details/107087038

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

复制粘贴

1 篇文章 0 订阅

订阅专栏

一、原生方法

1、结构

<li><span>运单号码：</span><b id="waybill_number">{$order->address}</b><p style="display:inline-block;color: red;" onclick="copy()">复制</p></li>

2、js

function copy(){
        copytxt($('#waybill_number')[0]); //获取复制文本的内容
        layer.msg('复制成功');
    }
        
   function copytxt(element) {
        window.getSelection().removeAllRanges(); 
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        window.getSelection().addRange(range); 
        selection.removeAllRanges();
        selection.addRange(range);
        
        document.execCommand('copy');  
     }

二、引用插件方法

1、插件地址

https://clipboardjs.com/
根据网页，该安装的安装，该引入的引入，此处不述说。
使用：
（1）结构

<li><span>运单号码：</span>
   {if !empty($order->waybill_number)}
      <b id="waybill_number" data-clipboard-text=" {$order->waybill_number}" >{$order->waybill_number}<p class="ml10" style="display:inline-block;color: #fff;background: red;" id="payment_copy">复制</p></b>
   {/if}
</li>

注：这个是php smarty 渲染的结构， {$order->waybill_number}表示一个变量。
要给结构复制的值加上data-clipboard-text属性，写法：data-clipboard-text=“复制的变量”
（2）js
先引入插件
结构加载完成运行以下代码，vue的话，写在mounted生命周期中

// ====复制粘贴====
    var clipboard = new Clipboard('#waybill_number'); 
    clipboard.on('success', function(e) { 
        layer.msg('复制成功');  //小弹窗 ，复制成功，这里用的是layer ui框架的
    });
    clipboard.on('error', function(e) {
        layer.msg('复制失败');
    });