点击按钮执行复制操作，首先需要选择被复制的内容，可以使用select()方法选中，execCommand(“Copy”) 复制

document.getElementById("copy").select();
document.execCommand("Copy");

这种方法需要浏览器的原生支持。可能有很多地方不能用，下面介绍一个插件的。兼容性不错。

浏览器的兼容性

使用方法

需要先下载引入这个插件，可以下载JS文件，也可以使用cdn

安装

npm install clipboard --save

引入

<script src="dist/clipboard.min.js"></script>

然后

var copy = new Clipboard('.btn');

<button class="btn" data-clipboard-text="https://www.fedte.cc">复制</button>

就可以完成复制操作了。

一个相当常见的用例是从另一个元素复制内容。可以通过在触发器元素中添加数据剪贴板目标属性来实现这一点。
此属性上包含的值需要匹配另一个元素选择器。代码如下:

<!-- Target -->
<input id="foo" value="https://www.fedte.cc">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">复制</button>

此外，您还可以定义一个数据剪贴板动作属性来指定是否要复制或剪切内容。
如果省略此属性，将使用默认的复制

<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">裁剪</button>

它有着他自己的事件监听，当操作成功或者失败的时候，可以执行你自己的方法。

    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

更多的使用方法，可以前往开源项目查看。

转载请注明：Falost的小窝 » 执行JS进行复制操作——clipboard.js