前端剪贴板复制功能实现原理

1. 兼容情况

如果想浏览器支持粘贴功能,那么浏览器必须支持,document.execCommand(‘copy’)方法,也可以根据document.queryCommandEnabled(‘copy’),返回的true或者false判断浏览器是否支持copy命令。

从下表可以看出,主流的浏览器都支持execCommand命令

2. 复制的原理

  1. 查询元素
  2. 选中元素
  3. 执行复制命令

3. 代码展示

1
2
3
4
5
6
7
8
9
10
11
// html
<input id="username" value="123456">

// 查询元素
var username = document.getElementById(‘username’)

// 选中元素
username.select()

// 执行复制
document.execCommand('copy')

注意: 以上代码只是简单示意,在实践过程中还有几个要判断的情况

  1. 首要要去检测浏览器execCommand能力检测
  2. 选取元素时,有可能选取元素为空,要考虑这种情况的处理

4. 第三方方案

clipboard.js是一个比较方便的剪贴板库,功能蛮多的。

1
2
3
4
5
6
7
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

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

官方给的代码里有上面的一个示例,如果你用了这个示例,但是不起作用,那你估计是没有初始化ClipboardJS示例的。

注意:下面的函数必须要主动调用,这样才能给响应的DOM元素注册事件。 ClipboardJS源代码压缩后大约有3kb,虽然很小了,但是如果你不需要它的这么多功能的话,其实你自己写几行代码就可以搞定复制功能。

1
new ClipboardJS('.btn');