js实现复制功能 js点击复制文本 _生活知识

介绍clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。
安装

通过npm安装（或者直接下载js文件引入）

【js实现复制功能 js点击复制文本】npm install clipboard –save
2.引入js
//官网提供了下载地址，也可以使用免费的cdn
使用示例
复制new ClipboardJS(".btn");如图书最简单的例子，单机复制按钮即可自动复制文本框的内容
换成下面就会变成剪切，主要是以下属性
data-clipboard-action=”cut”
剪切new ClipboardJS(".btn"); 剪切操作仅适用于或元素
或者这样，直接复制 data-clipboard-text属性的内容
复制事件监听，可以打开控制台自行尝试var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection();});clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});高级用法

动态绑定

new ClipboardJS('.btn', { target: function(trigger) { return trigger.nextElementSibling; }});

动态赋值

new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); }});

要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值

new ClipboardJS('.btn', { container: document.getElementById('modal')});

更好的管理单页面的DOM生命周期

var clipboard = new ClipboardJS('.btn');clipboard.destroy();兼容性备注如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级
提供Chrome和Firefox的扩展一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。