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

itvincent 发布于2019-08-26 10:29 / 2551人阅读

摘要：为什么复制文本到剪贴板应该不难。在内部我们需要获取所有匹配的元素选择器并且为它们每一个添加上事件侦听器。因为这个原因我们使用事件代理通过一个侦听器取代了多个事件监听器。从另一个元素复制文本常见的用例是复制另一个元素的内容。

工作中需要使用到的一个复制插件，使用简单兼容性还行，因为没找到中文版介绍就自己翻译一下，水平有限，不一定全按文章走，如果有问题欢迎指正！！
为了更加直观的展示用法,略微修改下代码让你们可以每个代码都直接看到效果,引用第三方地址可以放心拉到本地运行.
原文地址https://clipboardjs.com/

clipboard.js能够用现代的方法来将文本复制到剪贴板上，不依赖Flash，不依赖框架，并且衹有3kb大小。

为什么？
复制文本到剪贴板应该不难。它不需要许多步骤来配置或加载数百KBs大小文件。但最重要的是,它不应该依赖Flash或任何臃肿的框架。
这就是为什么clipboard.js的存在。

安装

你可以在npm。

npm install clipboard --save

或者浏览器中。

bower install clipboard --save

如果你不是在包管理,就下载一个ZIP文件clipboard.js。

设置

首先,从dist文件夹(用户放置脚本的路径)引入脚本或者从第三方加载CDN提供商。
用户放置脚本的路径：
jsDelivr：
RawGit：
从另一个元素剪切文本

另外,你可以定义一个data-clipboard-action属性来指定如果你想复制或剪切内容。
如果省略该属性,默认将使用复制。




    
        
        constructor-nodelist
        
    

    
        
        Mussum ipsum cacilds...

正如您可能期望的那样,剪切操作只能在或< textarea >元素使用。

从属性复制文本

事实上,你甚至不需要另一个元素复制其内容。你可以在您的触发元素里包含data-clipboard-text属性。




    
        
        constructor-nodelist

事件

有些情况下,你想展示一些用户反馈或捕获被选中复制/剪切操作后的行为。
这就是为什么我们定制事件如成功和错误让你监听和执行你的自定义逻辑。

constructor-nodelist

现场演示,只是需要打开控制台。

高级用法

如果你不想修改HTML,有一个很方便的命令式API供您使用。所有您需要做的就是声明一个函数,做你的事,并返回一个值。
例如,如果你想要动态设定了一个目标,你需要返回一个节点。(好像这里不支持界面跟控制台同时出现,所以操作看不到打印信息,可以完整复制下来直接运行)




    
        
        constructor-nodelist

如果你想要动态地设置一个文本,你需要返回一个字符串。(注意不能再目标元素上加data-clipboard-target属性,会报错的)
写法有两种:

直接返回固定字符串




    
        
        constructor-nodelist

藏在目标元素属性中获取返回




    
        
        constructor-nodelist

还有,如果你正在使用单页应用程序,您可能想要更精确地管理的生命周期DOM。这是教你如何清理创建的事件和对象。

var clipboard = new Clipboard(".btn");
clipboard.destroy();

浏览器兼容性

这个库依赖于Selection和execCommand APIs。前者兼容所有浏览器,后者兼容以下浏览器。

好消息是,如果你需要兼容老版本浏览器clipboard.js支持优雅降级。你要做的就是当执行成功时回调函数弹出一个提示框说复制!,按Ctrl + C时在失败事件的回调函数提示因为文本已经被选中。
您还可以通过运行Clipboard.isSupported()查看clipboard.js是否支持,这样你可以从UI隐藏复制/剪切按钮。

下面是我说的,这是全文中挺重要的一步,也是我敢直接使用在项目的原因,因为大家都知道插件大多有它自己的局限性跟兼容问题,为了折腾那些会耗费很多的时间精力,更多时候因为水平问题根本无从下手,
有了一个方法支持我就让它出现,不支持就让用户自己复制,没有什么善后工作了!

Clipboard.isSupported()

GPU云服务器云服务器 js复制到剪切板 java剪切文本文本复制 linux复制到目录

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

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

如何使用异步剪切板 AsyncClipboard API

摘要：同步方法交互剪切板的阻塞有限的访问权限跨浏览器体验不一致对多种数据类型的支持有限等问题解决起来也是麻烦。这里有篇文章讲述到底该如何用操作剪切板 showImg(https://segmentfault.com/img/remote/1460000018714576?w=5000&h=3333); ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅长时间我们一直在使用 docume...

CocoaChina 2019-08-26 13:39 评论0 收藏0
HeyUI组件库按需加载功能上线，盘点HeyUI组件库有哪些独特功能？

摘要：测试复制至剪切板的文本测试相关文档复制剪切板滚动至视图内其实，这是一个非常方便的功能，比如说，分页加载后滚动至头部，切换页面时切换至头部。HeyUI组件库如果你还不了解heyui组件库，欢迎来我们的官网或者github参观。官网 github 当然，如果能给我们一颗✨✨✨，那是最赞的了！按需加载当heyui组件库的组件越来越多的时候，按需加载的功能终于上线了。话不多说，先把按需...

IamDLY 2019-05-22 19:08 评论0 收藏0
H5复制粘贴双端适配的解决方案（终极版）

摘要：前言最终适配所有机型的方案基于官网这个库由几个不同的提供商托管。提供的复制失败的方法，进行复制失败提示复制失败请手动选择复制。上其他相关分享使用实现前端页面复制到粘贴板的功能中配合实现点击按钮复制内容到剪切板前言最终适配所有机型的方案基于clipboardjs官网https://clipboardjs.com/ 这个库由几个不同的CDN提供商托管。选择你最喜欢的：）建议使用 v...

keithyau 2019-08-22 16:10 评论0 收藏0
H5剪切板功能

摘要：复制内容到剪贴板插件官网地址引用方式默认是截取中的的属性值截取输入框中的值里面还有很多高级用法可以前往官网逻辑更多细节官网框架提供的剪切板插件最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况： 1.不带input输入框的原生js方法这种情况适用于复制非...

Developer 2019-08-22 18:20 评论0 收藏0