php点击按钮复制隐藏内容,实现点击按钮 复制文本内容

一、原生方法

1、结构

运单号码： {$order->address}

复制

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)结构

运单号码：

{if !empty($order->waybill_number)}

{$order->waybill_number}

复制

{/if}

注：这个是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('复制失败');

});