js复制html到粘贴板,JS点击按钮复制内容到粘贴板中

写在前面

有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板。下面我们来具体说一下实现方法(默认安装了jQuey)。

方案介绍

我看了很多网上的文章，目前有2种方案。

js原生方法：document.execCommand()

第三方库：clipboard.js

下面来分别介绍这两种方法的内容

js原生方法

第一种是使用js原生方法：document.execCommand()。这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用(自测ios企业微信中无法复制，建议使用第二种方法)。

execCommand兼容性

定义

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数说明

方法返回一个 Boolean 值，如果命令不受支持或禁用，则为false。

aCommandName ：命令名称，例如： copy，更多命令查看execCommand官方说明；

aShowDefaultUI：是否展示用户界面，一般情况下都是 false；

aValueArgument：对于需要输入参数的命令，是提供该信息的DOMString。

举例说明

复制内容：

复制

...

$(document).ready(function(){

$('#copybtn').bind('click',function () {

const input = document.querySelector('#copy');

input.select();

if (document.execCommand('copy')) {

document.execCommand('copy');

console.log('复制成功');

} else {

console.log('复制失败');

}

});

});

第三方库clipboard.js

clipboard的使用非常简单，下面举例来说一下，更多内容可以查看clipboard官网。

引入clipboard.js库文件

可以把该库文件下载在本地再引用，本文直接引用clipboard官网的CDN

HTML和逻辑代码

复制内容：

复制

...

$(document).ready(function(){

var clipboard = new ClipboardJS('#btnCopyLink'); // 点击按钮复制到粘贴板

clipboard.on('success', function(e) { // 复制成功后运行函数

console.log('复制成功！');

e.clearSelection();

});

});