—— 分享前端技术,记录生活点滴

clipboard.js实现点击复制

  之前做过点击复制按钮,复制对应文本的需求实现,回想起初也是被兼容性问题整得够呛。现在我在这里总结下,留着以后遇到同样需求时,翻出来看看,也分享给各位朋友。

  有两种实现方式,最终我选择方案二:

方案一: 通过原生 js 的方法(存在兼容性)

  document 自带 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。

语法

  document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数说明
  • aCommandName

  String 类型,表示命令的名称。对文本的复制剪切操作对应的实参为copycut,完整的命令请参考这里

  • aShowDefaultUI

  Boolean 类型,是否展示用户界面,一般为 false。

  • aValueArgument

  Object 类型,一些命令(如insertImage)需要额外的参数(insertImage需要提供插入 image 的 url ),默认为 null。

  execCommand 方法的返回值是 Boolean,如果值为 false 则表示操作不被支持或未被启用。

示例代码
1
2
<input type="text" id="copyVal" readonly value="被复制内容" />
<button class="copyBtn">点击复制</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var copyBtn = document.getElementsByClassName('copyBtn')[0];
copyBtn.onclick = function() {
var copyVal = document.getElementById("copyVal");
copyVal.select();
try {
if(document.execCommand('copy', false, null)) {
console.log("复制成功");
} else {
console.log("复制失败");
}
} catch(err) {
console.log("复制失败");
}
}

  此方案步骤简单,也没有引入外部资源,但测试告知,iOS移动端浏览器不能复制,包括微信浏览器,这将严重影响用户体验,目前不可取。于是尝试方案二。

方案二:使用 clipboard.js 实现

  也尝试过其他插件,但很多是基于 falsh 做的,传闻 flash 将在一两年内被淘汰,所以还是不用为好。最终找到 clipboard.js,它是一个不需要 flash 就能实现文本复制或者剪切到剪切板的轻量级插件。

语法

var copyUnit = new ClipboardJS('.copyBtnClassName');

参数说明
  • copyBtnClassName

  String 类型,触发复制或剪切操作的按钮的 class 名。

  • data-clipboard-action(添加在待复制文本容器元素的自定义属性中)

  String 类型,表示操作类型,可选copycut,默认为copy

  • data-clipboard-target(添加在待复制文本容器元素的自定义属性中)

  String 类型,待复制文本容器元素的 id 值,必填。

示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<div id="copyVal">hello world</div>
<div class="copyBtn" data-clipboard-target="#copyVal">点击复制</div>
<script type="text/javascript">
//实例化 ClipboardJS对象;
var copyUnit = new ClipboardJS('.copyBtn');
copyUnit.on("success",function(e){
// 复制成功
alert(e.text);
e.clearSelection();
});
copyUnit.on("error",function(e){
//复制失败;
console.log( e.action )
});
</script>
</body>
</html>

  以上便是本次分享的内容,希望对你有所帮助,感谢关注阿晋的网络日志。

支付宝打赏 微信打赏

如果觉得我的文章对您有用,请随意赞赏 :)

留言