浏览器中复制或剪切文本插件 clipboard.js

插件说明

这是一个不依赖 flash，不依赖其他框架就能实现文本复制或剪切板的轻量级插件

官网地址：http://www.clipboardjs.cn/

插件安装：

第一种：通过 npm 工具安装

npm install clipboard --save

第二种：GitHub 下载，然后引入 dist 文件夹下的 clipboard.min.js

下载地址：https://github.com/zenorocha/clipboard.js

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

使用步骤：

1、引入 js 插件资源文件

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

2、在页面定义复制按钮

<button class="copyBtn" data-clipboard-text="复制的内容">复制</button>

3、初始化 ClipboardJS 对象，并打印复制的内容。初始化时可以传入 dom 选择器、html 元素、html 元素列表

//初始化 ClipboardJS
var clipboard = new ClipboardJS('.copyBtn');
//复制成功
clipboard.on('success', function (e) {console.log(e.text);e.clearSelection();
});
//复制失败
clipboard.on('error', function (e) {console.log(e.action);
});

插件功能：

1、从另一个元素复制文本：给目标元素添加一个 data-clipboard-target 属性来实现这个功能，这个属性的值就是能匹配到另一个元素的选择器。

<input id="copyTarget" value="复制的内容">
<button class="copyBtn" data-clipboard-target="#copyTarget">复制</button>

2、从另一个元素剪切文本：给目标元素添加一个 data-clipboard-action 属性来指明你想要复制还是剪切内容。

data-clipboard-action="copy" 复制文本，默认为复制文本

data-clipboard-action="cut" 剪切文本，cut 操作只在 <input> 或 <textarea> 元素上生效

<textarea id="copyTarget">剪切的内容</textarea>
<button class="copyBtn" data-clipboard-action="cut" data-clipboard-target="#copyTarget">剪切</button>

3、从属性复制文本：给目标元素添加一个 data-clipboard-text 属性即可，属性的内容就是复制的内容。

<button class="copyBtn" data-clipboard-text="复制的内容">复制</button>

插件事件：

在用户复制或剪切后，可以通过触发自定义事件 success 和 error 实现自定义逻辑

var clipboard = new ClipboardJS('.copyBtn');
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);
});

高级用法：

如果不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。需要做的就是声明一个函数，做一些处理，并返回一个值。

1、动态设置 target，需要返回一个 node 节点：

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

2、动态设置 text，需要返回字符串：

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

3、如果在 Bootstrap 模态框 (Modals) 中使用，或在其他修改焦点的类库中使用，将获得焦点的元素设置为 container 属性值：

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

4、如果使用单页应用，想要更加精确地管理 DOM 的生命周期，可以清理事件及创建的对象：

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

浏览器支持：

这个库依赖 Selection 和 execCommand APIs，前者兼容所有的浏览器，后者只兼容以下浏览器版本。

Selection：https://developer.mozilla.org/en-US/docs/Web/API/Selection

execCommand：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Selection 支持的所有浏览器：https://caniuse.com/#search=selection


Chrome 42+	Edge 12+	Firefox 41+	IE 9+	Opera 29+	Safari 10+

检查浏览是否支持：

Clipboard.isSupported()

浏览器中复制或剪切文本插件 clipboard.js相关推荐

js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
如何在Linux终端中复制和粘贴文本、文件和文件夹。
复制和粘贴是电脑上使用最多的操作之一.虽然使用Ctrl+C和Ctrl+V键盘快捷键很容易做到这一点,但在Linux终端上就不是那么简单了.你有几种选择来完成这项工作.以下是你如何在Linux终端中复制 ...
兼容手机PC,点击即可复制文本内容到剪切板插件clipboard.js
开源项目 https://github.com/zenorocha/clipboard.js. (拷贝文本到剪切板不应该复杂,它不应该需要许多步骤以及几百KB的文件,另外,它不应该依靠flash以及其 ...
js复制文本插件Clipboard
<buttonclass="copy-btn cobyOrderSn"data-clipboard-action="copy":data-clipboar ...
获取浏览器中鼠标选中的文本内容
如果你在浏览器中安装了翻译插件的话,控制台可能会输出你选中的文本内容,那么这是如何做到的呢? 直接查看他的源码,主要是使用了window.getSelection 这个属性所以我们也可以仿照着写一个 ...
js复制图片文字图文分享到微信/QQ，插件clipboard.js的应用案例
js复制图片-文字,可用于商品复制文案进行分享的功能~ 1.此案例应用到clipboard.js,具体使用可查阅文档: 2.这个框架功能还是比较强大的,复制文本和图片,复制成功后的html的标签会被去 ...
js 一键复制html,js插件clipBoard.js实现一键复制
clipboard.js不需要jquery依赖,也不需要flash的支持,而另一个插件zClip需要依赖于flash,clipboard.js显得更加灵活. 引入clipboard.js 使用方法va ...
前端之路：网页内容转图片，并且复制网页内容，并且优化体验。（截图插件Clipboard.js 的使用）。
做项目遇到一个比较奇葩的需求,觉得很有意思,记录下.方便以后回忆. 涉及框架(html2canvas.min.js clipboard.mn.js): 直接连cdn <script src= ...
自动复制吱口令html,使用clipboard.js实现复制吱口令功能的示例代码
最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制.在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现.因为它不依靠flash以及其他框架,而且体积小使用简单 ...

浏览器中复制或剪切文本插件 clipboard.js

插件说明

插件安装：

使用步骤：

插件功能：

插件事件：

高级用法：

浏览器支持：

浏览器中复制或剪切文本插件 clipboard.js相关推荐

最新文章

热门文章