JS复制到剪切板（兼容主流所有浏览器）

时间：2022-09-14 21:00:13

1、主要用到github上的一个开源的项目：clipboard.js
2、clipboard.js 可以实现纯JS复制数据到剪切板中（无需flash支持）跟现在主流的zeroclipboard 比起来方便了不止一点两点（毕竟不是所有人都会装flash插件的）
下面写一些DEMO来记录一下学习：

首先引入依赖JS包：

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

然后实例化clipboard（clipboard实例化需要指定一个元素，也就是点击指定元素会触发复制方法）

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

下面是完整DEMO：

<script src="clipboard.min.js"></script>
 <textarea id="bar" cols="10" rows="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">clipboard.jsd的DEMO演示</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
  Cut to clipboard
</button>
<script> 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); alert("复制成功"); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); </script>

这样就可以简单的完成对主流浏览器进行JS复制的操作了,
本例子只是做出了一个基础的操作，
如果想深入了解请到clipboard.js官方网站了解详情，
JS下载地址：http://download.csdn.net/detail/qq_22445455/9619105
官方地址：https://clipboardjs.com/

标签：

相关文章