前言
需要实现一个一键复制文本的功能,试了能搜到的几种方法,都有各种不足,最后选择了clipboard.js实现,以下分别简要说明下几种方法和不足,以及clipboard.js的用法.
几种实现
- jQuery库的jQuery-zclip.
需要依赖jQuery和基于jQuery的zclip,让人不能接受的是其实现需要依赖flash,在这个主流浏览器都禁用flash的时代,不得不说这个插件兼容性几乎为0.
因为应用性太低,这里就不贴实现代码了,感兴趣的同学可以自己搜一下. - 原生js
浏览器提供了copy命令 ，可以复制选中的内容document.execCommand("copy")。如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用copy 命令，将文本复制到剪切板，但是 select() 方法只对<input>和<textarea>有效，如果需要对其他元素进行复制，可以考虑在页面添加一个隐藏的textarea，同步下两个元素的值即可。
优点:
原生js,不依赖第三方插件缺点:
mac下不兼容实现:
<!-- 文本所在的代码块 -->
<div id='textDiv' >text you want to copy</div>
<!-- 隐藏的文本域用来同步选中需要复制的文本 -->
<textarea id='textArea' style='display: none'></textarea>
<!-- 复制按钮 -->
<input type='button' id='copyBtn' onclick='copyText()'/>
<script>
var copyText = function() {
// 同步文本
var text = document.getElementById('textDiv').innerText
var textArea = document.getElementById('textArea')
textArea.value = text
// 选中文本
textArea.select()
// 复制
document.execCommand('copy')
}
</script>
- clipboard.js git主页
- 优点, 主页已经讲得很明白:
- No Falsh 不依赖flash
- No Framework 不依赖框架
- Just 3kb gzipped 压缩后只有3k
- 安装:
我这里是用到老项目中,所以直接clone了一份源码,把其中的clipboard.min.js 拿到项目中,页面中添加依赖
<script src="clipboard.min.js"></script> - 使用:
<!-- 你要复制的文本所在元素 -->
<input id="foo" value="要复制的文本内容">
<!-- 复制按钮,通过id绑定目标元素 -->
<button class="btn" data-clipboard-target="#foo">
复制
</button>
<script src="clipboard.min.js"></script>
<script>
// 初始化作为触发器, 传入dom元素或dom选择器或者元素集合
var clipboard = new ClipboardJS('.btn');
// 复制成功的回调
clipboard.on('success', function(e) {
alert('复制成功')
e.clearSelection();
});
// 报错回调
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
alert('复制失败')
});
</script>
最后贴一下项目中的实现效果
