资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/clipboard—不依赖flash的文本复制插件

clipboard—不依赖flash的文本复制插件

jasperyang / 2709人阅读

摘要：是一款轻量级的实现复制文本到剪贴板功能的插件。通过该插件可以将输入框，文本域，元素中的文本等文本内容复制到剪贴板中官方地址地址适用方法引入文件基本使用首先需要您需要通过传递选择器，元素或元素列表来实例化它。

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

官方地址：https://clipboardjs.com/
Github地址：https://github.com/zenorocha/clipboard.js/

适用方法

1.引入js文件

2.基本使用

首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。

new Clipboard(".btn");

用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器

另外还有另外一个属性data-clipboard-action属性，以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于或

从属性中复制文本，不需要另一个元素当触发器，可以使用data-clipboard-text属性，在后面放上需要复制的文本

3.其他说明

通过运行检查clipboard.js是否支持Clipboard.isSupported()，返回true则可以使用。
显示一些用户反馈或捕获在复制/剪切操作后选择的内容。操作，文本，触发元素

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);
    e.clearSelection();
});
clipboard.on("error", function(e) {
    console.error("Action:", e.action);
    console.error("Trigger:", e.trigger);
});

该插件使用的是事件委托的方式来触发，所以大大减少了对dom的操作。

4.高级使用

如果你不想修改你的HTML，那么你可以使用一个非常方便的命令API。所有你需要做的是声明一个函数，写下你想要的操作，并返回一个值。下面是一个对不同id的触发器返回不同的值的例子

5.支持的浏览器

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

云服务器 GPU云服务器 flash插件下载 不依赖 文本复制 复制插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96072.html

相关文章

  • [译] 复制文本到剪切板的clipboard.js使用方法

    摘要：为什么复制文本到剪贴板应该不难。在内部我们需要获取所有匹配的元素选择器并且为它们每一个添加上事件侦听器。因为这个原因我们使用事件代理通过一个侦听器取代了多个事件监听器。从另一个元素复制文本常见的用例是复制另一个元素的内容。 工作中需要使用到的一个复制插件，使用简单兼容性还行，因为没找到中文版介绍就自己翻译一下，水平有限，不一定全按文章走，如果有问题欢迎指正！！为了更加直观的展示用法,略...

    itvincent 评论0 收藏0

  • Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库

    摘要：发布了一个专门用于从页面向本地计算机的剪贴板复制文本的库。用库来实现这一功能，问题是这个库是用一个不可见的来完成剪贴操作，而技术正被各大浏览器厂商冷落，所以势必要有一个新的方案。 showImg(https://segmentfault.com/img/bVso8J); Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库：Clipb...

    phodal 评论0 收藏0

  • 使用clipboard实现前端页面复制到粘贴板的功能

    摘要：最近公司需要做一个实现复制的功能，本来以为会是很简单两三行代码的事，后来发现网上说的那些原生实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方的库。 最近公司需要做一个js实现复制的功能，本来以为会是很简单两三行js代码的事，后来发现网上说的那些原生js实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方...

    Astrian 评论0 收藏0

  • 在vue移动端项目中，配合clipboard.js插件，复制一段密令（类似淘宝支付宝口令）的文本到剪

    摘要：需求开发过程中遇到的需求需要复制请求过来的一段密令类似支付宝淘宝口令到剪切板。网上搜了下，是个相对比较靠谱的第三方。感谢大佬的评论意见使用该方法，会在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。 需求 开发过程中遇到的需求需要复制 请求过来的一段密令（类似支付宝淘宝口令）到剪切板。 pc端的文本复制到剪切板 如果是在pc端的话，可以直接使用原生js进...

    brianway 评论0 收藏0

  • 在vue移动端项目中，配合clipboard.js插件，复制一段密令（类似淘宝支付宝口令）的文本到剪

    摘要：需求开发过程中遇到的需求需要复制请求过来的一段密令类似支付宝淘宝口令到剪切板。网上搜了下，是个相对比较靠谱的第三方。感谢大佬的评论意见使用该方法，会在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的。 需求 开发过程中遇到的需求需要复制 请求过来的一段密令（类似支付宝淘宝口令）到剪切板。 pc端的文本复制到剪切板 如果是在pc端的话，可以直接使用原生js进...

    Lyux 评论0 收藏0

发表评论

登陆后可评论

0条评论

jasperyang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<