javascript-clipboard.js教程

1.介绍：clipboard.js 是javascript来复制文本到粘贴板。不需要任何依赖，使用起来很简单！2.兼容性：IE 9+, Chrome 42+, Firefox 41+, Safari 10+, Opera 29+, Edge 12+3.使用：1>引入js文件：<script type="text/javascript" src="clipboard.js"></script>2>实例化 Clipboard：new Clipboard(element)element 可以是3种类型：1)DOM 选择器：'#btn', '.btn', 'div'2)HTML 元素对象：document.getElementById('btn');3)HTML 元素对象列表：document.getElementsByTags('div');3>使用的几种方式：1.从指定的另一个元素，复制内容。要求：1)触发元素上，添加 'data-clipboard-target="目标元素"' 属性2)目标元素可以是：input, textarea，div等其他html标签2.从指定的另一个元素，剪切内容。要求：1)触发元素上，添加 'data-clipboard-target="目标元素"' 属性2)触发元素上，添加 'data-clipboard-action="cut"' 属性(默认是copy，我们可以改为cut，会剪切)2)目标元素只能是：input, textarea3.从触发元素上，指定复制文本。要求：1)触发元素上，添加 'data-clipboard-text="复制文本"' 属性4.不通过data-属性来控制，通过js来控制new Clipboard('.btn', options)options 可选的键有：{target: function(trigger){// 触发DOM对象return trigger.nextElementSibling;// 返回复制的目标元素},text: function(trigger){// 触发DOM对象return trigger.innerHTML;// 返回复制的文本内容}}5.销毁 Clipboard 对象Clipboard.destroy();4>事件：clipboard.on('success', function(e){console.log(e.action);// copy | cutconsole.log(e.text);// 复制的文本内容console.log(e.trigger); // 触发元素对象});clipboard.on('error', function(e){console.log(e.action);// copy | cutconsole.log(e.trigger); // 触发元素对象});4.github地址：https://github.com/zenorocha/clipboard.js